invalidateQueries stops working if I navigate between Next.js routes

[detoner777]

We used queryClient.invalidateQueries(someQueryKey) to refetch data in queries and its works well.
Project migrated to Next.js and router changed from react-router to next-router code base stays maximum the same except for router changes.

Now if I navigate from one route to another and then go back, queryClient.invalidateQueries(someQueryKey) stops working, all other query calls work as it should useQueris and useMutations .

What weird, when I navigate between the pages queries disappear from Query Dev Tools but continue to work, except of queryClient.invalidateQueries(). If I refresh the page Query Dev Tools starts to show me the correct queries and it starts working correctly until I navigate to another route and back.

I'd really appreciate if anyone can help me with this issue! Let me know if any additional info is required.

[TkDodo]

You really need to show the code. My best guess is you create a new QueryClient on every page transition, which basically throws away the old cache.

[yordis]

@TkDodo do you recommend doing React.useState or React.useMemo of some sort?

[yordis]

The following seems to fix the issue, indeed, the previous one was creating a new client every time, so I assume that is why the query invalidations weren't working properly.

export function useReactQueryClient() {
  const router = useRouter();
  const [queryClient] = React.useState(function () {
    return new QueryClient({
      defaultOptions: {
        queries: {
          onError(err) {
            // ....
          },
        },
      },
    });
  });

  return queryClient;
}

[TkDodo]

yes, your client has to be stable. However useMemo does not guarantee this. Have a read here: https://tkdodo.eu/blog/use-state-for-one-time-initializations

[yordis]

Roger! Thank you very much (fixing the example btw)