Pause a query if there is no internet connection

[orjive5]

How to prevent a query from resolving if the internet connection is lost while it's pending? Right now it returns an error, but I need it to be paused, invalidated or something. I'm new to react query, please help, thanks

[TkDodo]

what you should be seeing is that a query, which has 3 retries per default, goes into paused state if there is no network connection. Then, it will continue automatically once the connection is regained. At least those are the default settings, might be different if you've changed them.

[antoantonydh]

I am planning to use the following way to override this behaviour:

import {focusManager, QueryClient} from '@tanstack/react-query';
focusManager.setFocused(true);

[TkDodo]

Is this behavior expected, or is it a bug?

It has been here since before me, and there are tests for it, so I guess it’s expected.

If you have a refetchInterval, I think you might not want / need retries?

[antoantonydh]

Yeah, good point. But let's say we have a long polling interval of 5 minutes.

If, for some reason, the refetch fails on the first attempt due to a network issue or something similar, a retry could be helpful here.

Otherwise, we might not receive any data until the next refetch cycle, which could create a gap.

[TkDodo]

you can set a dynamic interval based on the query by implementing refetchInterval: (query) => ... and make it a smaller interval when the query is in error state.

[antoantonydh]

oh, nice. So we keep the retry off, then we reduce the refetchInterval dynamically based on the error scenario. Thanks, I will try this out.

[aryankholqi]

you can use this implementation:
const { data, error, isLoading, refetch } = useQuery('myData', fetchData, {
retry: false, // Disable automatic retry
onError: (error) => {
if (error.message === 'Network response was not ok') {
// Handle network errors here
// Display a message to the user indicating loss of internet connection
console.error('Network error occurred');
}
},
});