Reset User Data on Logout

[TkinterinShanghai]

I want to log out and clear all data thats related to a user.

My approach:

    onSuccess: () => {
      queryClient.removeQueries({
          predicate: (query) => query.queryHash.includes("private"),
        });
    },

And yup, the queries are gone. But the data is still there, the components do not rerender. It would be very nice the components that dont have valid queries anymore would update, which they dont. How would I go about doing that or is that a missing feature?

[TkDodo]

what do you mean: "the queries are gone but the data is still there" ? For what I know, when you call removeQueries, the queryKey will be removed from the cache and active subscribers will be notified

[TkinterinShanghai]

As you can see I tried several approaches ( commented out ) but none of them work

[TkinterinShanghai]

Ideally I wouldnt even make another attempt to fetch the data of the private routes. But there are hardly any examples out there on how to do that, if any. I'd be quite thankful if you could help me. I've used react-query in several places already and I dont want to migrate once more

[TkDodo]

And although the query is gone, the data is still there

still don't know what this means exactly.

What I think is happening is that if you remove a query from the queryCache (which removes the queryKey and the associated data), all active subscribers are notified. If you have any active subscribers, it means they will probably start another fetch. So I'd make sure that there are no active subscribers, or disable them via the enabled flag.

[TkinterinShanghai]

When checking the dev tool, it says that the query is gone, but the data in the list is still there

[TkDodo]

so here is a repro: https://codesandbox.io/s/beautiful-bell-pz8cd?file=/src/index.js

when you click the Remove button, the query is removed from the cache and the devtools also show that. Yes, the screen is not updated (I guess that's what you want to tell me with "the data is still here"?), but what's the behaviour you would expect here? What should it render instead? If the observer were informed, they would just refetch ...

so the bottom line is: don't remove a query from the cache that has active observers? Unmount all observers, then remove from the cache. If the logout mutation removes from the cache, and then redirects to the login page, the data would be gone from the cache and not visible on the screen anymore.

Sorry if I'm misinterpreting here 🤷