TanStackT
TanStack2y ago
6 replies
popular-magenta

✅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 ❤️
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!
Was this page helpful?