mutation stuck in loading status after error if using onError

[ryanmk54]

I have a mutation that gets stuck in loading status after the mutation function throws an error, but it only gets stuck if I provide an onError function. The onError function shows a notification in an ancestor component using the following code.

import {useCallback} from 'react';
import NestedError from '../helpers/NestedError';

const useNestedErrorNotification = ({notificationValues}) =>
  useCallback(
    (error: NestedError) => {
      notificationValues.handleOpen(error.toString(), 'error');
      throw (error.cause || error);
    },
    [notificationValues]
  );

I thought about creating an issue, but I haven't been able to make a minimal-complete-verifiable-example yet. One interesting thing to note is that when I tried making a code sandbox to reproduce the issue, it crashes the page, but when the error is thrown in my app. It doesn't crash, with and without the onError. I'm using rails-ranger (Axios) for api requests. I don't know if that would make a difference on the error behavior. This behavior happened in v2. I upgraded the mutations to react-query v3, loading status is still stuck.

Does anyone have any ideas why the loading status would be stuck when I include onError, or why the error doesn't crash the page? I thought I might be handling the error in a catch somewhere, but it doesn't crash without onError too. Is there something in Axios that prevents an error response from crashing the page?

[TkDodo]

am I reading this correctly that the above code is your onError handler for useMutation ? If so, I don't quite understand why you would throw inside that error handler? That shouldn't be necessary - react-query knows about your error already, you can show the notification in onError, and you would still see the error + error status in the mutation...

[TkDodo]

// Convert progressevent error to custom error.

why would you do that in onError rather than in the queryFn itself?

NB: useMutation is intentionally used, because I want to trigger the call from the click of a button.

That's no reason to useMutation over useQuery. You'd likely want client state to drive the query via the key and set that client state when the button is clicked ;)

[ryanmk54]

// Convert progressevent error to custom error.

why would you do that in onError rather than in the queryFn itself?

Doing it in the queryFn would be better, as it would be handled sooner there. Also if using a default queryFn, there is no need to add a custom error handler to every onError.

Converting to a custom error would be better done in the queryFn, but I find it easier to display the error in onError, because I have access to the notification hook there.

[TkDodo]

onError is not meant for transforming errors, same as onSuccess can't transform data. They are functions to execute side-effects and don't return anything.

[toniton]

onError is not meant for transforming errors, same as onSuccess can't transform data. They are functions to execute side-effects and don't return anything.

@TkDodo.
It looks like network requests was intercepted by another function, and network errors were not being triggered at the query function level. Instead, network errors were returned as ProgressEvent in the onError callback. Hence why I needed the custom error handler.

After setting up a bare react-query installation, I get a better error.

[toniton]

That's no reason to useMutation over useQuery. You'd likely want client state to drive the query via the key and set that client state when the button is clicked ;)

My actual useCase:
onClick of button ---> call API A (check status) ---> onPrecondition passed ---> call API B (perform action).

I find it more convenient using useMutation over useQuery to make on-demand API GET calls that does not require all the perks of a query, as I won't have to manage states to make queries. Also, in this case, query keys and other sorts of caching are not needed for checking status since I want to make a new call everytime the button is clicked.

A button to check the status of an item would be one of such examples where mutateAsync.then takes preference over enabled: variable for me. 😉

[igortas]

@TkDodo
I still having the problem, returning errors only from the fetcher, executes both onError and onSuccess.
It's weird that RQ don't handle well first fail scenario, isLoading is stuck to true.

[ryanmk54]

A code snippet would be helpful here.