CODEWITHSUNDEEP
javascriptreactjsreact-query
HobbitOfShire
HobbitOfShire

Reputation: 2424

Remove query from cache without refetching react query

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?

Upvotes: 27

Views: 83307

Answers (4)

Utku Akyüz
Utku Akyüz

Reputation: 1

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.

Upvotes: 0

Anjan Talatam
Anjan Talatam

Reputation: 4044

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();

Upvotes: 19

LNI
LNI

Reputation: 3181

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.

Upvotes: 2

TkDodo
TkDodo

Reputation: 29046

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?

Upvotes: 31

Related Questions