Default networkMode configuration and fetchStatus = "paused"

[damacisaac]

I recently worked on a "bug" in our production app where react-query silently stopped making requests across the application. Only for a specific user and only in Chrome. After a long debugging session, I finally found the networkMode behaviour of react-query. Turns out the user had encountered a bug in Chrome where navigator.onLine was set to false and never set back to true, despite being connected. See https://bugs.chromium.org/p/chromium/issues/detail?id=678075.
I understand that this behaviour is expected for react-query, and that there does exist some documentation for it. Nonetheless, it was very difficult to debug. It happened to a single user at a random time (not related to any of our deploys) in a single browser.

I think react-query can do more to help in this scenario:

• Add something in the "Important Defaults" section that describes this behaviour.
• Add a reason or something in the query state that indicates why a query is paused. It's not clear in the documentation that fetchStatus === 'paused' is a result of not having an internet connection. That queries just stop working without any error or clear reason makes this difficult to debug.
• There have been multiple bugs in the chromium issue tracker around navigator.onLine. It seems like this is not a reliable property in Chrome.
• Internet connection seems out of scope for react-query. Maybe I'm off here, but react-query is a library for managing the state of asynchronous operations. It's more generic than a data-fetching-over-a-network library. So being aware and affected by network status does not seem like a good default.

[TkDodo]

Add something in the "Important Defaults" section that describes this behaviour.

Feel free to PR

Add a reason or something in the query state that indicates why a query is paused

A query can only be paused because there is no network connection. This is documented here:

• https://tanstack.com/query/v4/docs/react/guides/network-mode

There have been multiple bugs in the chromium issue tracker around navigator.onLine. It seems like this is not a reliable property in Chrome.

you can set a custom event listener on the onlineManager if you want a better way to determine if you're really online or not:

• https://tanstack.com/query/v4/docs/react/reference/onlineManager#onlinemanagerseteventlistener

one way to achieve this is to make a fetch request and catch the network error.

Internet connection seems out of scope for react-query. Maybe I'm off here, but react-query is a library for managing the state of asynchronous operations. It's more generic than a data-fetching-over-a-network library. So being aware and affected by network status does not seem like a good default.

we went with this default query because more often than not, react-query is used for data fetching. You can easily opt out of this by setting the networkMode globally for all your queries and mutations to 'always':

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      networkMode: 'always'
    },
    mutations: {
      networkMode: 'always'
    }
  }
})

[damacisaac]

Understood, thanks for the quick reply. I'll stick to having networkMode: 'always'. Will consider opening a PR for documentation.

[nicholashamilton]

Do any of you know if TanStack query has moved away from using navigator.onLine or plan to?

I've been experiencing the chromium bug that shows navigator.onLine=false while being online. It results in my app being stuck in a loading state.

https://issues.chromium.org/issues/338514113

[TkDodo]

Yes we moved away from it in v5 because of those issues.

[nicholashamilton]

Yes we moved away from it in v5 because of those issues.

Awesome, thanks for clarifying! 🤙