Query never goes into Error state if there's no internet

[Shaddix]

Describe the bug
Query never goes into Error state if user is offline. Query is forever in Fetching state, which prevents me from showing an error.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://tn8bn.csb.app'
2. Open Chrome Dev Tools, disable cache, set Throttle to Offline (or disable All Network Adapters on your PC. Disabling cache is needed anyway)
3. Click on refetch
4. Query is forever in Fetching state.

Expected behavior
I'd expect the query to fail (go to Error state), so I'd be able to show error to the user.
Btw, if retry is set to false, then query goes into Error state as expected.

Screenshots

[TkDodo]

the retry mechanism pauses when you are offline and continues when you are back online, so I think this is expected:

https://github.com/tannerlinsley/react-query/blob/fbd3488a3c13eeef3d9eb4d5cd536787ac75ecf3/src/core/retryer.ts#L193-L195

Btw, if retry is set to false, then query goes into Error state as expected.
I'd expect the query to fail (go to Error state), so I'd be able to show error to the user.

I don't think this would be my expectation, but maybe I'm wrong. currently, refetch bypasses everything and just does a refetch - but the retry will then respect the onlineManager (see above).

My expectation would more be that refetch does maybe not even start a fetch when you are offline, as active queries will be refetched anyways when you come back online (that is, unless you turned off refetchOnReconnect).

From what I can tell, the retry mechanism doesn't know what initiated the fetch, so we can't really say at the moment: even if you are offline, please continue retrying, because we've called refetch manually. We'd likely need to do the same for when the window is no longer focussed, maybe with a force flag being passed all the way down to the retrier

So I agree that this is somewhat unexpected, but I'm unsure how to proceed :/

[Shaddix]

My expectation would more be that refetch does maybe not even start a fetch when you are offline, as active queries will be refetched anyways when you come back online (that is, unless you turned off refetchOnReconnect).

Btw, what I described happens not only during refetch, but also if query keys change/new query is mounted. In the new query scenario, I guess the only meaningful behavior would be to go into Error state, since there's no previous state to preserve (and show infinite loading isn't nice).

My expectation would more be that refetch does maybe not even start a fetch

yep, I guess it seems like an expected behavior as well.

Btw, thanks for linking the code from retryer.ts! According to it, I could easily achieve the desired behavior myself by overriding the retry function (and returning false if detected error is a network error).

[arnaudbzn]

My expectation would more be that refetch does maybe not even start a fetch when you are offline, as active queries will be refetched anyways when you come back online (that is, unless you turned off refetchOnReconnect).

I'm agree with @TkDodo

A solution we are testing is to set the query option enabled to false when the network is offline (in React Native) to prevent any unnecessary (re)fetch and to avoid a loading indicator (we display a specific message when offline).
I was expecting that (re)fetching was disabled on all queries when onlineManager.setOnline(false), but we have to manage this offline mode manually.

A possible solution, that should not be a breaking change, is, when the network is offline, no (re)fetch are initiated, isError is set to true and error is set to "network is offline".

[TkDodo]

we will be tracking this issue and related ones here from now on:

• Clarify online support #2927

The plan is to work on this for the next major version, because it will contain breaking changes. Your feedback would be appreciated.

[MetaMmodern]

@TkDodo hello! Thanks for implementing important additions, but could you please also provide an answer in this issue on how to achieve what OP described? I followed the linked issue where you tracked all similar issues, but networkMode didn't help in my case so I have to just disable retries for now until I find out how to both keep retries and show error modal when internet goes offline. Thanks in advance.

P.S. I'm also asking to provide answer here because this is the first result in google when you search for this speciifc problem

[MetaMmodern]

BTW, when refetchOnWindowFocus is set to true the retry: false fix doesn't work either. If you wsitch tabs the query repeats and is stuck without enabling error state.

[TkDodo]

I'd expect the query to fail (go to Error state), so I'd be able to show error to the user.

if you want the Query to fire in any case and then fail because there is no network, set networkMode: 'always'

[MetaMmodern]

@TkDodo confirming that this actually works, thank you! I just had to wait a couple seconds more