useMutation isError state doesn't change when there is no internet connection

[KuzmanTheDev]

Hello, so I noticed there is no state change when a mutation request is made while being disconnected from the internet. The isLoading state becomes true and perpetually remains that way . I expect the mutation to fail with no internet connection and hence update the isError state to true and turn isLoading to false.

Please can anyone help with how I can solve this issue, I want to be able to give feedback to the user when there is a problem with their internet connection.

[TkDodo]

I expect the mutation to fail with no internet connection and hence update the isError state to true and turn isLoading to false.

have you turned on retries for mutations? Because without retries (the default), offline mutations would just error as you'd expect.

With retries, mutations will be paused and the isPaused flag will be set to true. mutations will then resume automatically once you have regained internet connection.

However, please keep in mind that better offline support if our flagship feature for v4, which is currently in alpha. You can read about it here:

• https://react-query-alpha.tanstack.com/guides/migrating-to-react-query-4#queries-and-mutations-per-default-need-network-connection-to-run
• https://react-query-alpha.tanstack.com/guides/migrating-to-react-query-4#proper-offline-support
• https://react-query-alpha.tanstack.com/guides/network-mode
• https://tkdodo.eu/blog/offline-react-query

[KuzmanTheDev]

Thanks for taking the time to respond. Unfortunately, with retries set to off, the isError state never turns true without an internet connection while isLoading remains on true and isPaused remains false.

[TkDodo]

Can you show that behavior in a codesandbox reproduction please because that is not how it should be ...

[KuzmanTheDev]

https://codesandbox.io/embed/usemutation-demo-forked-mu55qm?fontsize=14&hidenavigation=1&theme=dark

Here is the link to the codesandbox. I have tried to make it similar to whatIi have in my application. To simulate being disconnected from the internet you can go to the network tab on your browser and toggle the network to the offline mode. You'll observe after the mutation is fired and fails the isError doesn't update to true.

[TkDodo]

This is merely because you catch the Promise in sendToDo, which makes your mutationFn not return a rejected promise, but a resolved one:

const sendToDo = (payload) =>
    api
      .post("/todos", payload)
      .then((res) => res.data)
      .catch((err) => console.log(err));

.catch without a return statement transforms your Promise to a resolved Promise of void. To do logging, please use the callback functions (onError) or re-throw the promise:

.catch(err => {
  console.log(err)
  throw err
})

[KuzmanTheDev]

You're right. It behaves the correct way now. Not throwing an error was the reason. Thank you so much.

[roni-castro-db]

This seems to be a problem for the latest react-query version.
I've updated the example by not catching any error and also upgraded all dependencies, and it is still in an infinite loading state until the internet connection is online.
Check this out:

Screen.Recording.2022-10-21.at.12.55.28.mov

https://codesandbox.io/s/usemutation-demo-forked-pedp9k?file=/src/App.js

[TkDodo]

status is loading but isPaused is true. So if you're isPaused, you can render something else. Seems like I haven't done a good job explaining this in the docs ...

[amitkanojiya]

export const useApiGetQuery = ({ key, endpoint, params, options = {} }) => {
return useQuery({
queryKey: [key, params], // Cache key based on endpoint and params
queryFn: () => fetchData(endpoint, params, { headers: options.headers }),
enabled: options.enabled, // Default to true if not specified
networkMode: 'always',
...options,
});
}; networkMode: 'always', isit show the erro mesage to you every request of api call if internet off