✅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
- click one of users link
- click
- console gets updated with
- email on screen changes
- if you open RQ devtools you'll see for
- click
Expectation:
-
Reality:
- data isn't changed
Any help or tips appreciated, Thank you for this awesome library
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 pageExpectation:
-
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!