React-Query keys get deleted because of Zustand

[bquangDinh]

Context

I'm using both React-Query and Zustand for state management. React-Query is for storing APIs data, and Zustand is for storing client-side states. Everything is working perfectly together. However, there is a really strange behavior that I couldn't debug. And I don't know whether this is Zustand's problem or React-Query. But I ask here anyway

Error

Whenever I change Zustand states (any states), for some reason, all of the React-Query keys (that are used to invalidate query) are wiped out. That results in calling invalidateQueries(() won't do anything because all keys have been deleted. React-Query is empty. I use ReactQueryDevTool to watch state changes in React-Query. And when I change Zustand states, all keys are gone and ReactQueryDevTool is blank.

Thinking

So my first thought is there is some interference between Zustand and React-Query that causes the data that is stored in the memory of React-Query to get deleted.

Quick solution

So my quick solution is whenever I change Zustand's states, I will reload the page (Zustand's states are persisted in localStorage). By doing that, it won't cause the trouble I explained above

[TkDodo]

you probably have an unstable QueryClient:

https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable