Post Request in Selector

[MuhammadHamzaChippa]

I wanted to get the response from the Axios post request and then update the atom based on the response from the API call. I have tried to do the async set in the selector, but this is not supported right now. So what alternative approach I can use right now for this purpose?

export const libraries = atom({
    key: 'libraries',
    default: []
})

export const addLibrary = selector({
    key: 'addLibrary',
    get: ({ get }) => get(libraries),

    set:  async ({get , set}) => {
        const title = `Desktop ${oldLibraries.length + 1}`
        const payload = {
            ...
        }
        const request = await axios.post(URL, payload, config)
        if (request.status === 201) {
            set(libraries , [request.data, ...oldLibraries])
            console.log([request.data, ...oldLibraries])
        }
    }
})

[honzabrecka]

Store each library in atomFamily and do the fetch there. In libraries store just pointers (ids) to them.

[MuhammadHamzaChippa]

@honzabrecka I have to frequently update and delete and the libraries from the library atom using api request, so I guess creating atomFamily for each of the library won't be a good idea

[honzabrecka]

To me addLibrary should be useRecoilCallback. Selectors should be idempotent, which something with add in name clearly is not. I'd still go with my previous proposal - in library (atomFamily) you can store promise (returned by axios.post) and in UI you can wrap it with Suspense or ErrorBoundary and leave the hard work on react.