Difference between `queryClient.clear()` and `queryClient.resetQueries()`?
Hey! I'm trying to understand what
queryClient.clear does, which is not very clear at all based on https://tanstack.com/query/v4/docs/react/reference/QueryClient.
The basic use case is:
* User signs out of a mobile app
* Reset all queries, so that data is refetched as an unauthenticated user
It sounds like the method I want to be calling in this case is resetQueries, but I just wanted to confirm — anyone able to help out? And espeically would love to understand what .clear() is actually doing, I tried playing around with in the a codesandbox but I can't tell 😂
Thanks!Overview | TanStack Query Docs
TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.
Motivation
8 Replies
other-emerald•3y ago
clear just clears everything
reset, as the docs say, resets it to its initial state. So if you use
initialData, that's what queries will be reset to. It doesn't delete anything
it will also, as the docs say, notifiy subscribers (useQuery is a subscriber), so if you are on a page and reset something, it will refetch.
the devtools have a refetch button, just try it out.
for logout -just use clearambitious-aquaOP•3y ago
Hmm I see — that's what I thought too, but based on a quick sandbox https://codesandbox.io/p/sandbox/priceless-bird-6ltq5q?embed=1&file=%2Fpackage.json%3A5%2C15, I'm seeing clear not have the intended behaviour (see console logs):
-
clear doesn't seem to clear the data
- clear does not trigger refetches (I assume if data got cleared, it would trigger a refetch...?)
- on the other hand, reset clears the data and triggers refetch
Am i missing something obvious here?priceless-bird-6ltq5q
CodeSandbox is an online editor tailored for web applications.
ambitious-aquaOP•3y ago
on logout, I'm thinking it might make more sense to use
reset, because we want to refetch all the queries (our app works both authenticated and unauthenticated). and we pretty much don't use the initialData arg anywhere, so it's effectively setting the data to undefined always (even if we did, I think the behaviour or resetting to initialData and refetching sounds preferable, at first thought
It's odd because in our actual app, clear does seem to clear all the data (and trigger refetches) and we've been using it for a while
but we noticed some weird behaviour occasionally, and after reading the docs a bit more precisely and making this repro sandbox, I'm now super confused 😅other-emerald•3y ago
It does exactly what it should and how it's described. Clear removes the entries from the cache (look at the devtool, they become empty!). But it doesn't inform subscribers, no refetch.
reset resets back to initial state (or empty), and then refetches. The cache is never cleared here, queries are not removed
ambitious-aquaOP•3y ago
look at the devtool, they become empty!). But it doesn't inform subscribers, no refetch.Aha! Thank you — and now I see why calling
reset after clear does nothing, because there is nothing in the cache...
As for the question of clear vs resetQuerieson logout, I suppose that's more of an app-specific question for us then! And that explains how we've been seeing refetches after calling clear , pretty much any re-render would cause a refetchother-emerald•3y ago
yep, now you got it 🙌
if we can make the docs clearer after your experience, please send a PR. The sentences on the page you linked are a bit convoluted ..
ambitious-aquaOP•3y ago
Sounds great, thanks!
optimistic-gold•3y ago
As an additional thought, for this use case (login/logout/login with another user) in addition to clearing the cache on logout we also integrate into our key factories the id of the current user. This way you have the guarantee that the data are not shared between users.