T
TanStack•3y ago
vicious-gold

QueryClient refetch on store value change

I'm using react-query paired with tRPC. I have a global store value that updates the tRPC context. I'm trying to trigger a tRPC/react-query refetch when the store value changes. If you click another app, like VSCode, and then click back to the browser, the query refetches properly. However, when trying to manually trigger the refetch using queryClient.resetQueries(), it refetches the old data. Not sure why blurring/refocusing the browser works but manually resetting the queries does not. This QueryProvider component wraps the entire app. The useEffect is what runs invalidate and resetQueries. Hopefully this gives a view of all the setup code. I've also posted this issue in the tRPC discord, but they suggested I ask here.
4 Replies
vicious-gold
vicious-goldOP•3y ago
No description
vicious-gold
vicious-goldOP•3y ago
For anyone who might be in a similar situation, this is the only thing I've been able to come up with that has worked so far: 
focusManager.setFocused(false);
await queryClient.invalidateQueries();
focusManager.setFocused(true);
focusManager.setFocused(false);
await queryClient.invalidateQueries();
focusManager.setFocused(true);
rare-sapphire
rare-sapphire•3y ago
Why calling resetQueries after invalidateQueries? invalidateQueries should be enough to trigger a refetch and, from what I understand, resetQueries resets the cache data to its pre-fetch value, so could be related?
vicious-gold
vicious-goldOP•3y ago
The above combo of setFocused and invalidateQueries was the only one I could get to work. Even manually invalidating the query from the dev tools did not cause a proper refetch.

Did you find this page helpful?