TanStack queries inadvertently entering "paused" state

79 Views Asked by At

I am having a problem both deving locally and in production where stochastically users will enter a state where certain queries are paused. The queries enter the paused state from initial page load, so the paused queries never actually fire off any requests they just forever sit in a paused state as shown in the screenshot below.

As per the TanStack Query docs, I understand that this will happen when a user loses network connection. What is weird here is that the page loads and a user can take actions on the page, so seemingly the network is connected for all of the app except for a small subset of my queries. Once it appears, this bug does not go away by refreshing the page, navigating pages, logging out/back in in the app, hard refreshing, hard quitting, etc. It is literally only fixed by restarting your computer, which seems absolutely crazy.

My queryClient is setup as such:

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      refetchOnWindowFocus: false,
    },
  },
});

If I update the queryClient to be this, this fixes it, as none of my queries will be in the paused state anymore:

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
      refetchOnWindowFocus: false,
      networkMode: "always"
    },
  },
});

My app is a Next.js (13.0.3), React (18.2.0), TanStack (4.22.0) application. I saw this happen about once or twice deving locally in the past few weeks, and just saw it in production today.

I believe I have fixed the problem, so my questions that remain are:

Has anyone seen this before/understand why this is a problem? This fix makes sense, but it doesn't help me understand the fundamental problem of why this is happening in the first place?

0

There are 0 best solutions below