How can i remove the cache of all my queries without refetch them again?

[znareak]

I want that after the user logout of my application the react query removes its cache, however i was searching in the official docs i found the methods:

queryClient.removeQueries(key); <-- Removes the queries ??
queryClient.invalidateQueries(key); <-- Invalidate all queries or a specefic query, but refetching it and saves it again in the cache:-/
queryClient.clear(); <-- Remove the cache?, to me not work this.

The methods not work for me :(

Then, is there some method that react query provides me to remove the cache without refetch them again?
it's a problem the cache because i need that when the user logout, the app remove all user old state and the cache too.

[TkDodo]

removeQueries is what you are looking for I believe. Can you show a reproduction of what is not working for you please

[znareak]

I understand, then is there some form to reset the react query internal state?
I don't found some form to reset or that react query delete that state and update the react UI without refresh the page.
I'm trying put that in the logout function to remove all old data user, it's the first time that happens for me i haven't idea of this specific solution.

Sorry for the example, the project has a lot of components and configurations, but in summary i'm using a useQuery() hook to fetch user notes and display in the UI. But react query i think that internally has still the old data (because the a SPA no refresh the page) and i am not deleting that old state.

[znareak]

I found a similar topic, here:
#431

[TkDodo]

queryClient.resetQueries will reset to the initial state, but it will also refetch in the background

[znareak]

Yes i understand, but it's necessary some function resets the state (delete all in the cache too) of react query without refetch, because if react-query refetchs the data, then the fetch results will store in the cache again but example, if i wish logout an user, then i delete the user token and invalidate the user query, but the react-query will refetch the data (but how don't exist an user token the fetch data is totally invalid) and after the result will store in the cache.
I'm looking something as this, but it seems that there isn't :(

[TkDodo]

if you want to logout a user, removeQueries should be enough. Why would you call invalidateQueries ? "invalidation" is basically a fancy term for refetch, so with that, you are refetching on purpose...

i feel like we're going in circles here. Please provide a codesandbox of your own to show what you think is not working.

[mooxl]

I solved this issue with

queryClient.clear();

[hamza7681]

@mooxl It will refetch your data again before redirecting you to unauthorize page

[busticated]

this worked for me:

import { onlineManager } from '@tanstack/react-query';

// ...
await queryClient.cancelQueries();
onlineManager.setOnline(false);
queryClient.clear();
// perform logout, redirect, etc

onlineManager.setOnline(false); has the effect of preventing all fetches / network calls which is exactly what i want. unfortunately, it has the side-effect of triggering any subscribers added via onlineManager.subscribe(). for my app in its current state, this trade-off is fine but it's definitely not ideal.

i'm aware of the query enabled field and related. using that would require a fair amount of plumbing to ensure all queries are coordinated. afaict queryClient.removeQueries() doesn't restrain currently mounted components w/ useQuery() calls.

it would be great if there was a simple, global way to achieve what onlineManager.setOnline(false); does without also implying a lack of network 🙏 👍