1

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.

Detoner
  • 514
  • 1
  • 7
  • 15
  • 1
    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. – TkDodo Dec 01 '21 at 16:42

1 Answers1

0

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;
}
Detoner
  • 514
  • 1
  • 7
  • 15