Invalidating Query
Hello,
I have a
useQuery([queryKeys.users]) that fetches data inside /users route, while on /users/new i am trying to invalidate that query upon creating a new record by doing the following queryClient.invalidateQueries([queryKeys.users]).
For some reason it's not working unless i am already in the same route. Is this not how i am supposed to invalidate a certain query?
I even tried to invalidate the query manually by hooking it up with a button (for testing purposes) and used it in the users/new route, it still did not work.
But it actually worked when i implemented the same button in the component under /users route7 Replies
rival-black•3y ago
I believe the format should be:
queryClient.invalidateQueries({ queryKey: [queryKeys.users]) not sure how you're storing it but it's missing queryKey.
https://tanstack.com/query/latest/docs/react/guides/query-invalidationQuery 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!
other-emeraldOP•3y ago
The thing is that i used both the object form as you just have shown and the function overload form, neither worked. I am not sure where i messed up
Like i said, for testing purposes i implemented a button under the
/users route and manually wired it up with the query invalidation code - it worked. When i implemented the exact same button under the /users/new route - it didn't work.vicious-gold•3y ago
I would use the devtools (https://tanstack.com/query/v4/docs/react/devtools) to see if your query is mounted at the time you call
invalidateQueries.
Is the page refreshed while you change routes? That could explain it.
If you can provide a minimal reproduction sandbox we can have a look too!Devtools | TanStack Query Docs
Wave your hands in the air and shout hooray because React Query comes with dedicated devtools! 🥳
When you begin your React Query journey, you'll want these devtools by your side. They help visualize all of the inner workings of React Query and will likely save you hours of debugging if you find yourself in a pinch!
other-emeraldOP•3y ago
Hello, thanks for taking the time to respond to me. I am sorry for the late reply, i was swarmed with work.
queryClient.invalidateQueries didn't do it for me - i assume it's due to the query i am trying to invalidate being inactive since i'm sitting at /users/details/ route while the query is being consumed at /users route. Though i might be mistaken, i am not sure.....
Also when i inspect the devtools, it shows that the query i am trying to invalidate is actually inactive, since the current route i am sitting at is not even consuming it - what i mean by that is that i am not using useQuery at my current route.
What actually forced the query to refetch/invalidate was to use queryClient.refetchQueries
I am sorry if that's confusing, English is not my mother tongue 😅vicious-gold•3y ago
So if the query is not even consumed by the current route, what's the expected behaviour when calling
queryClient.invalidateQueries or queryClient.refetchQueries,. That data is not shown anyways?other-emeraldOP•3y ago
The behaviour i expect to happen is that if i'm sitting on the
/users/create route, i create a record, invalidate the cache then navigate to the /users route where i have a useQuery that fetches all users - since /users is consuming the query i am trying to invalidate, shouldn't it work?
For some reason, the devtool shows that the query is not being invalidated which results in me still seeing stale data unless i hard refresh the page
queryClient.refetchQueries does fix it for me. I am not sure if the issue is because i am using suspense with react-query?spiritual-aqua•3y ago
refetchQueries refetches everything that matches immediately. invalidateQueries only fetches the active ones, and marks all others as stale. So when you go to the other route, assuming that a mount event happens and you haven't changed refetchOnMount, it should refetch when you get there, showing stale data briefly but then the latest data. Please show a codesandbox reproduction if that's not the case