✅invalidation issue
I'm struggling with invalidating cache for general query. Looking at docs (https://tanstack.com/query/latest/docs/react/guides/query-invalidation) my code seems to be similar, aside from extracting queryKey to function and encapsulating cache invalidation into own hook.
Reproduction steps:
- navigate to codeSandbox: https://codesandbox.io/p/sandbox/hidden-dream-forked-wpd4z8?file=%2Fsrc%2Frq.tsx
- open console (it should only have
getting Users )
- click one of users link
- click mutate button
- console gets updated with getting user by id x
- email on screen changes
- if you open RQ devtools you'll see for [users] key state.isInvalidated is marked as true
- click Grid on top of the page
Expectation:
- useGetUsers will run query again, getting "new" data (with console log message)
Reality:
- data isn't changed
Any help or tips appreciated, Thank you for this awesome library ❤️Query Invalidation | TanStack Query Docs
Waiting for queries to become stale before they are fetched again doesn't always work, especially when you know for a fact that a query's data is out of date because of something the user has done. For that purpose, the QueryClient has an invalidateQueries method that lets you intelligently mark queries as stale and potentially refetch them too!
5 Replies
stormy-gold•2y ago
you have set
refetchOnMount: false so there is no refetch when Grid mounts 🙃
i don't fully understand why so many people mess with the flags .. I never touch themxenial-blackOP•2y ago
But if I do that, it'll download data every time this component is shown, and I don't want that.
ie Grid -> user -> grid without any mutation will download data again
stormy-gold•2y ago
the trick is to set
staleTime insteadstormy-gold•2y ago
React Query as a State Manager
Everything you need to know to make React Query your single source of truth state manager for your async state
xenial-blackOP•2y ago
as soon as I saw that reply I knew you had blog post about this 🙈 Thanks for such quick response 👏🏻