removeQueries doesn't always remove the query's cache

[SusiKette]

I have a page that displays data that user can edit. Once they send the data, most of the time the data is updated to the server correctly and the data on the page is updated. Sometimes this doesn't happen and it will still render the old data until the cache time runs out.

This is the query that's cache needs to be removed:

export const useWhatever = (id: string): UseQueryResult<Type[]> => {
    return useQuery(['item', { 'id': id }], () =>
            axios.get<Type[]>(  ...  ).then((response) => response.data),
        {
            staleTime: 60000,
            refetchOnWindowFocus: false,
            enabled: Boolean(accessToken)
        }
    );
}

This is the code that handles sending the updated data and removing the cached query:

axios.post(  ...  )
            .then((response) => {
                if(response.status === 200) {
                    queryClient.removeQueries(['item', { 'id': id }], { exact: true })
                }
            })

I have also tried invalidateQueries and resetQueries. Most commonly this seems to happen if you make new update to data too soon after previous update. The data always updates on server correctly, but the client data doesn't always update because the cache isn't clearing. Once the cache time runs out and I update the page the data is corrected on the page. Is there something wrong with how I'm handling this or is this a bug?

[TkDodo]

I have a page that displays data that user can edit. Once they send the data, most of the time the data is updated to the server correctly and the data on the page is updated. Sometimes this doesn't happen and it will still render the old data until the cache time runs out.

you'd want to invalidate the query with queryClient.invalidateQueries to trigger a refetch after the update happens. removing just removes the query from the cache, but doesn't trigger a re-render. Only if the component is re-rendered by some other means, it would refetch.

[SusiKette]

I did mention at the end of my post that I already tried invalidateQueries, but it has the same issue. That is what I originally used.

[dseipp]

We're having the same issues here. invalidateQueries wasn't working so we started using removeQueries but this didn't seem to change the result, old data still lingered. removeQueries is supposed to completely remove the old data, so I'm not sure why it still renders even after navigating away and coming back. Most of the time it works, sometimes it doesn't. Been very frustrating trying to track this one down. Upgraded to 4.0.10 to see if the new release helped but it hasn't.

[TkDodo]

please show a reproduction. removeQueries removes the query from the cache, but it doesn't re-render the page. So the data will stay on the screen. You can try this by pressing remove in the devtools. If the page re-renders for some other reason, it will go back to loading state and start to fetch.

Hard to say what you are trying to achieve without knowing the use-case. You're mentioning invalidateQueries and that it's "not working" so you use removeQueries and honestly that doesn't make a lot of sense to me because those two functions do completely different things ...

[stuarthallows]

What I'm seeing is that in the following case the detail query is not being removed from the cache when removeQueries is called followed by setQueriesData. However, if I remove the call to queryClient.setQueriesData on the following line then the detail cache item does get removed.

const apiUrl = 'api/qualification';

const queryKeys = {
  all: ['qualifications'] as const,
  lists: () => [...queryKeys.all, 'list'] as const,
  list: (filters: string) => [...queryKeys.lists(), { filters }] as const,
  details: () => [...queryKeys.all, 'detail'] as const,
  detail: (id: string) => [...queryKeys.details(), id] as const,
};

const deleteQualification = async (uid: string) => {
  const { data } = await api.delete<void>(`${apiUrl}/${uid}`);
  return data;
};

export const useDeleteQualification = () => {
  const queryClient = useQueryClient();

  return useMutation(deleteQualification, {
    onSuccess: (_data, uid) => {
      queryClient.removeQueries(queryKeys.detail(uid));
      queryClient.setQueriesData(queryKeys.lists(), 
        (previous: QualificationListItem[] | undefined) => previous?.filter((item) => item.uid !== uid) ?? []);
    }
  });
};

[TkDodo]

I wouldn't see why a call to setQueriesData would "influence" removeQueries. That's certainly suspicious. Can you put that in a codesandbox reproduction?

[jmz7v]

Did anyone find a solution for this one?
I'm consistently experiencing data not being removed by either removeQueries or invalidateQueries but I don't know if it's a real issue or maybe I'm missing something when it comes to usage.

[TkDodo]

No one has shown a reproduction yet so I'm not looking into it.

[tonyedgal]

@jmz7v here's the solution.

To use queryClient.removeQueries() do not use the new instance of QueryClient, use the useQueryClient() hook instead.

Your code should look like this

// other imports
import { useQueryClient } from '@tanstack/react-query'

const Component = () => {
   const queryClient = useQueryClient()

   const removeQuery = () => {
          queryClient.removeQueries( queryKey )
   }

I hope this helps. @TkDodo maybe the documentation needs updating or the library needs a fix, either ways this is what worked for me.

[Theblooder]

Thanks you very much it's working form me too

[jmz7v]

Thank you so much!

[fairnakub]

Had to login to say thank you. I had been stuck for an hour.

[thejoecode]

I found this thread searching for a way to clear/reset the cache and re-issue the active queries and none of the functions here worked for my case.

However resetQueries did exactly what I was looking for:

await queryClient.resetQueries();

From on the docs on resetQueries:

The resetQueries method can be used to reset queries in the cache to their initial state based on their query keys or any other functionally accessible property/state of the query.

This will notify subscribers — unlike clear, which removes all subscribers — and reset the query to its pre-loaded state — unlike invalidateQueries. If a query has initialData, the query's data will be reset to that. If a query is active, it will be refetched.