Atom not sync data with react query data when using gcTime, staleTime.

[ducpt-bili]

Hi,

Atom not sync data with react query data when using gcTime, staleTime. Below is my example:
export const todosQueryAtom = atomWithQuery(() => ({
queryKey: ["todos"],
queryFn: fetchTodos,
gcTime: 0,
staleTime: 0
}));

export const todosAtom = atom((get) => {
const todos = get(todosQueryAtom);
console.log("🚀 ~ todosAtom ~ todos:", todos.isFetching)
if (!todos.isFetching) {
return todos.data?.map((todo) => atom(todo))
}
return []
});

// And in my component, i using this pattern in 2 my component.
const [dataQuery] = useAtom(todosQueryAtom)
console.log("🚀 ~ dataQuery:", dataQuery.isFetching)
const [data] = useAtom(todosAtom)
....

But after some seconds, i click on my 2 screen, the dataQuery.isFetching is not change (not recall api in react-query) and i check data in todosAtom it still persist.
So i need to sync data by my self, right?

Thanks

[dai-shi]

@kalijonn Can you check some new issues?

[kalijonn]

I was unable to reproduce this. gcTime and staleTime are working as expected when I conditionally re-render the component that shows the todos. I'm not able to understand what is expected vs what you are seeing. Can you create a minimal reproduction for this?

[ducpt-bili]

hi @kalijonn , does your query on 2nd screen re-call because gcTime and staleTime is 0? I want to control data in Atom like react-query does, if i set gcTime to 0, it will re-call because data in react-query store will be emty and mark at stale. Do your sample work like that?
May you share with me your working example please?

[XHMM]

I also have this issue that gcTime not take effect.

After checking the cache doc, i guess calling useAtomValue(myQueryAtom) multple times(without unmount) is not creating multiple instance like useQuery() so when calling the second useAtomValue(myQueryAtom), no newer observer was added, so the logic of gcTime is not invoked?