Im new to and experimenting with recoil and was curious as to what the common approach would be to using both recoil and tanstack query within a react app. There's qualities of both that im really fond of and trying to find a sensible way to make them both work in parallel with each other.
My thoughts are that you would make the query with tanstack-query and set the atom state to the response. And then for any mutation you can just invalidate the query to update the atom with the most recent data. At a glance this would make the atom the single source of truth, right?
If you have a response from an api that is an array of objects, how would you go about storing each item in that array, would you use atomFamilies or just store the array in a single atom? If atomFamilies how would you go about doing that so when you call it by an id you get all the data for that item? If single atom, what would a selector look like to accomplish that?
What im thinking:
Atom
export const dataAtom = atom({ key: 'data', default: [] as Data[] })
query:
export const useGetDataByUser = (id: string) => {
const setData = useSetRecoilState(dataAtom)
return useQuery(['dataByUser'], async () => {
const { data } = await DataAPI.getDataByUser(id)
setData(data.getDataByUser) <--- setting recoil state everytime this is called
return data.getDataByUser
})
}