Home > front end >  React query cancel / abort mutation if paused / offline
React query cancel / abort mutation if paused / offline

Time:08-24

I'm using some mutations in a React Native app. I'd like to set a default behavior for all mutations so when I'm in offline mode and I try to make a mutation, display an error and do nothing. Right now, I've been able to catch this by using

  mutationCache: new MutationCache({
    onMutate: async (_, mutation) => {
      if (mutation.state.isPaused) {
        toastError("Network error!", "Please check your network connection");
        mutation.state.status = "error";
      }
    }
  })

where I set up my QueryClient(), but, when I switch to online mode again, the mutation gets fired. I'd like to avoid this situation, and just abort / discard / cancel the mutation instead of automatically resume it.

I've also tried calling mutation.destroy() but nothing happens.

How can I do it? Note I've tried to "force" the mutation status to "error" but I've still getting the same behavior.

CodePudding user response:

I think there is nothing currently in react-query that would support this. The idea is that if a mutation has been fired, but it cannot be done because you're offline, the execution will be "deferred" until you are online again.

What you can do is:

  • not allow firing the mutation when you are offline. So basically, disable the button or whatever triggers the mutation.

  • set networkMode: 'always' (available in v4). This will fire mutations regardless of online / offline status. If you are offline, the mutation will fail with a network error. Then, you can display an error message. I think this is what you want given the requirements of "when I'm in offline mode and I try to make a mutation, display an error and do nothing."

  • Related