Invalidate queries doesn't work [React-Query]

Also, there is one more reason that was not mentioned before:

If you used enabled option in useQuery than such queries are ignored by invalidateQueries. From docs:

https://tanstack.com/query/latest/docs/react/guides/disabling-queries

The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.

I accidently used

const queryClient = new QueryClient();

instead of

const queryClient = useQueryClient();

new QueryClient() creates a new react-query Client(which is usually passed to a context wrapped over your App), this should be done only once.

wheres useQueryClient returns a reference to the value that the react-query Client context wrapped around your app provides. You should use it inside your components.

The two most common issues why query invalidation is not working are:

• keys are not matching, so you are trying to invalidate something that doesn't exist in the cache. Inspecting the devtools helps here. Oftentimes, it's an issue with number/string (for example, if an id comes from the url, where it is a string, but in your key, it's a number). You can also try manually clicking the invalidate button in the devtools, so you will see that invalidation per-se works.

• the queryClient is not stable across re-renders. This happens if you call new QueryClient() inside the render method of a component that then re-renders. Make sure that the queryClient is stable.

In my case, all I had to do was await the promise that invalidateQueries returns before navigating away (using react-router).

In my case, invalidate queries didn't work because I tried to invalidate query that was used in another page (the useQuery that used this case wasn't rendered).

I had 2 options to solve this:

• use refetchInactive option like this: queryClient.invalidateQueries(key, { refetchInactive: true }), which will refetch the data instead of "stale" it.
• use refetchOnMount: true option when calling useQuery, which will refetch the data on mount regardless if it is stale.

UPDATE: My issue was I incorrectly set up React Query as follows:

export default function App() {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      ...
    </QueryClientProvider>
  );
}

Fix:

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      ...
    </QueryClientProvider>
  );
}

Subtle, but changes everything.

My issue is that I have react-router-dom's useNavigate() .navigate(), i.e.:

const router = useRouter();
router.push(`${path}?field=${name}`);

which either clears the cache or remounts components, but the important effect is the cache is cleared (can be observed through React Query Devtools).

Since the cache is cleared but the components stay, doing invalidateQueries() has no effect, as there's nothing on the cache.

It is the exact issue described here: https://www.reddit.com/r/learnreactjs/comments/uqd9sl/reactquery_cache_being_cleared_when_navigating/

I don't know how to solve this, so my "workaround" is to avoid using navigate() when possible. Although this is not ideal and I think I will get this issue again later. :'(

• react-query v5.12.2
• react-router-dom v6.16.0

Both Samil and Eliav ideas combined worked for me:

1. QueryClient is only for initializing the QueryClientProvider.

const queryClient = new QueryClient();

2. useQueryClient is used everywhere else.

const queryClient = useQueryClient();

QueryClient should be instantiated on the top of your app. (app.js or index.js)

Sample

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();
ReactDOM.render(
    <QueryClientProvider client={queryClient}>
    <App />
    </QueryClientProvider>,
document.getElementById('root'));

In my case I was trying to use the queryClient in a component with a higher level than the QueryClientProvider in the components tree. You have to use the useQueryClient hook in a component wrapped by the QueryClientProvider.

<MyFirstComponent> <!-- I was using it in My FirstComponent. It is outside the QueryClient Context so it is not going to work there -->
  <QueryClientProvider>
    <MySecondComponent /> <!-- You can use the queryClient here -->
  </QueryClientProvider>
</MyFirstComponent>

I had the same issue and in my case the problem was that I imported the wrong client.

I used vscode's autocomplete and accidentally imported it from wagmi instead of @tanstack/react-query.

For me nothing worked, so i just detect a route change in the parent component and refetch when the route changes:

import { useLocation } from 'react-router-dom';

...

const location = useLocation();
const { data: tagNames, refetch } = useGetTagNames();

...

useEffect(() => {
  refetch();
}, [location]);

In my case I supplied a number type as a query key in useQuery and string in invalidateQueries, thus not invalidating the query.

When using ensureQueryData to retrieve data from cache, one interesting challenge surfaced: the invalidateQueries API method did not work for data invalidation 😱😱😱. I wanted to retrieve data from cache if exist or fetching otherwise.

Thankfully, React Query has a different API for this particular situation:

queryClient.removeQueries({ queryKey: ["queryKey"] });

An additional reason for why your queries might not be properly invalidating is if you aren't returning the promise-based function in mutationFn.

In my case, I made the mistake of calling the promise-based function without returning it. For example:

function useUpdateObject(id) {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: (newObj) => {
      // MISTAKE! Need to return ky.put(...)
      ky.put(API_ROUTE, { json: newObj }).json()
    },
    onSuccess: () => {
      queryClient.invalidateQueries({
        queryKey: ["object", id],
      });
    },
  });
}

In my case the invalidateQueries did not work after the app was hot-reloaded (after a change).

Very weird behaviour, but it takes a while before you figured out the hot-reloading is the culprit.

My problem was that i had two QueryClientProvider one in layout ans second in other layout

I had the same problem where everything was working correctly locally, but not in production. The issue was due to the cache of my Nginx server preventing data updates. To fix this, I had to add the directive

add_header 'Cache-Control' 'no-cache' always;

to my Nginx server configuration.

My issue was that I had:

const { isLoading, data } = useQuery(
  CACHE_KEY,
  async () => apiFunction(foo)
);

When in fact I needed:

const { isLoading, data } = useQuery(
  CACHE_KEY,
  async () => await apiFunction(foo)
);

Very subtle and easy to miss!

It seems like I have been dropped on my head in my childhood because I made a custom hook and spread the config props in the wrong way.

Do this:

const { onSuccess, ...restConfig } = config || {};

return useMutation({
  onSuccess: (data, variables, context) => {
    queryClient.invalidateQueries({
      queryKey: [productsQueryKeys.PRODUCTS],
      exact: true,
    });

    onSuccess && onSuccess(data, variables, context);
  },
  ...restConfig, <---- make sure you exclude the fields you're using
  mutationFn: createProduct,
});

Instead of this:

const { onSuccess } = config || {};

return useMutation({
  onSuccess: (data, variables, context) => {
    queryClient.invalidateQueries({
      queryKey: [productsQueryKeys.PRODUCTS],
      exact: true,
    });

    onSuccess && onSuccess(data, variables, context);
  },
  ...config, <---- who raised you like this?
  mutationFn: createProduct,
});

WHEN USING SSR IMPLEMENTATION WITH NEXTJS 13

When following the implementation enforced on TanStack's docs, you would be encouraged to create a request based client for Server Side and a singleton client for Client Side.

But when using queryClient.invalidateQueries, be sure to use queryClient from useQueryClient instead of importing your global client.

Here is an example of how to do it when invalidating in a mutation.

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

  return useMutation({
    mutationFn: async (data: { productId: number }) => {
      return await addProductToCart(data.productId);
    },
    onSettled: async () => {
      queryClient.invalidateQueries({
        queryKey: ["cart"],
        refetchType: "all",
      });
    },
  });
};

As suggested by GamsBasallo and N.T. Dang on MasterPiece's answer, if you're using ReactRouter, on the action function you have to add the refetchType to all and await the invalidating function. That is because queries are in inactive state inside ReactRouter action function.

Helpful doc :

https://tanstack.com/query/latest/docs/reference/QueryClient/#queryclientinvalidatequeries

https://tkdodo.eu/blog/react-query-meets-react-router#invalidating-in-actions

In my case, I was trying to invalidate two queries at the same time:

queryClient.invalidateQueries({ queryKey: ['profile', 'userTopics'] })

When I separated it, then it worked

queryClient.invalidateQueries({ queryKey: ['profile'] })
queryClient.invalidateQueries({ queryKey: ['userTopics'] })

Same issue. Success and error at the same time. The problem was in that line:

const queryClient = useQueryClient

I've just forget brackets in the end.

const queryClient = useQueryClient()