set async API response to atom

I’m new to Recoil. I have an API that gives me user details, something like this

{
"name": userName,
"age" : 28,
"degree": MS,
"address": ...
}

I have a selector that gives me the API response. I would like to store each of these values to a recoil state/atom. So that I can use it across the application. We can’t use an atom setter inside a selector. After getting the selector response from import, I was not able to set in the react component also. as it goes to the infinite loop. Please guide me.

export const userdetails = selector({
    key: 'userdetails',
    get: async ({ get }) => {
        try {
            const response = await axios.get('/user'));
            const data = await response.data;
            return data;
        } catch (error) {
            throw error;
        }
    }
});

[NethraRaghu]

Thanks @dommi10 this helps.

[dommi10]

Yes i think. let’s update the code below:

1. let’s update own selector

export const userDetails = selector({
    key:'userDetails',
    get : async ({ get }) => {
        try{
               const handleUserSearch = get(handleUserSearch);
               let response;
    
               if(handleUserSearch){
                 response = await axios.get('/user'));
                 return response.data;
                }
          return response;
       }catch(error){
         throw error;
        }
    },
    set: async( { set }, newValue)=>{
    //update to server
         try{
             await axios.post('/updateUser',{newValue}));
          }catch(error){
             throw error;
          }
    //update local state
        set(
           handleUserSearch,
           true
        );
    }});

2. to update component value

//imports
import * as React from 'react';
import { useRecoilState } from 'recoil';
import { userDetails } from './store';

//use recoil state to update user
const [ userDetails, setUserDetails ]   = useRecoilState(userDetails);

//create local use state with hooks
const [name, setName ] = React.useState("");

//update function
const updateDetail = () => {
setUserDetails({...userDetails, name});
}

//handle change
const handleNameChange = (e, {value}) =>setName(value);

return(
<>
<input onChange={handleNameChange } placeholder='name'/>
<button onClick={updateDetail}>update</button>
</>
)