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

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:

Go to 'https://tn8bn.csb.app'
Open Chrome Dev Tools, disable cache, set Throttle to Offline (or disable All Network Adapters on your PC. Disabling cache is needed anyway)
Click on refetch
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

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 :/

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).

@TkDodo

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".

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.

@TkDodo

@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

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.

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'

@TkDodo

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

yes because of the default retry: 3

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'

will it working on V5?

networkMode: 'a

could you please tell me
what is version of react-query

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

TkDodo commented on Apr 24, 2021

Shaddix commented on Apr 24, 2021

arnaudbzn commented on Apr 28, 2021

TkDodo commented on Nov 11, 2021

MetaMmodern commented on Apr 8, 2024

MetaMmodern commented on Apr 8, 2024

TkDodo commented on Apr 8, 2024

MetaMmodern commented on Apr 8, 2024

TkDodo commented on Apr 8, 2024

miteshdevg commented on Apr 25, 2024

miteshdevg commented on Apr 25, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions