invalidateQueries stops working if I navigate between Next.js routes

Question

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.

Answer 1

Discussion moved to : https://github.com/tannerlinsley/react-query/discussions/3037

answer: 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 [queryClient] = React.useState(function () {
    return new QueryClient({
      defaultOptions: {
        queries: {
          onError(err) {
            // ....
          },
        },
      },
    });
  });

  return queryClient;
}