Remove query from cache without refetching react query

Question

I am using react query in my react app this way

    const { data, status } = useQuery(key, queryFunc, { staleTime: 1 * 60 * 1000 });

I want to be able to invalid a certain key in cache based on data value, basically when data is null, so I added an effect

useEffect(() => {
   if (data === null) {
     queryClient. invalidateQueries(key)
   }
}, [data])

This approach will cause a request loop where an invalidated query will refetch, get null as response, effect executes and invalidates and so on so on...

I want to be able to remove the key from cache without refetching, so I don't end up in this infinite requests loop, been digging into the react query docs but no luck. Anyway had a similar case with react query where key needs to be removed from cache without refetch?

Intimacy

Answer 1

I think queryClient.removeQueries(key) would do what you want: https://react-query.tanstack.com/reference/QueryClient#queryclientremovequeries

Can you maybe elaborate a bit on your use case? Why would you want to remove a query from the cache if data is null?

Gratifying

Thanks dear @Gratifying for being in community. – Omer

I have an application set up using the typical useQuery('item', fetchItem), and everything works fine when I display the data in item. But I noticed when I log out and log in with a new user, the old data from the old user is still there for a second while new data is loading, I wanted a way to guarantee this data is removed on logout or page change... – Altheaalthee

Answer 2

From V4 ( TanStack Query )

To Remove a specific query from the cache

queryClient.removeQueries({ queryKey: QUERY_KEY });

To Remove All queries from the cache

queryClient.removeQueries();

Shankle

Answer 3

I had a scenario similar to one described by @Bersan in comment above, where the user logout followed by user login still used to show stale data (more accurately, the data associated with previous user).

To address this, I changed the logOut functionality to the following:

        await signOut();  // Calls AWS Amplify App signOut
        await queryClient.invalidateQueries();  // Do this AFTER signOut

This seemed to have the right effect, but the logOut functionality is via a navigation bar entry on the main page, so there always is a query associated with the page being display. I did notice that active query refetch occurred after calling invalidateQueries. But, by calling invalidateQueries AFTER signOut, the query handlers checked that there was no active user and returned empty data.

Another mechanism may be to use queryClient.reset(), but the documentation is quite lean and I am not sure if this will also not trigger the same behavior.

Bottom line is that in the query handler, you should include the logic to test if a user is logged in or not, and handle that explicitly in query handlers. Then, on user logout, if the queries are invalidated, the app will behave as expected. Hope this helps.

Barely

Answer 4

I reset and remove the query and my problem solved. I had a case where I need to clear the cache and disable the query. I used (enabled: false) but, while I was resetting the query, it was refetching then cancels the fetch request by itself because query was disabled.

So this is the way I handled the issue:

  const handleRemoveCacheAndDisableQuery = () => {
      setEnabled(false);
      queryClient.resetQueries(["fetchList"]);
      queryClient.removeQueries(["fetchList"]); 
};

I am not sure this is the correct way but this helped me.

Groping