mutate onError fires only ones when multiple requests fail

[swingthrough]

Here's a codesandbox example:
https://codesandbox.io/p/sandbox/amazing-kilby-ms6kz7?file=%2Fsrc%2FApp.tsx

I have this function, which might be called simultaneously on multiple rows that show orders:

const handleCancel = (orderId: number) => {
    clearOrdersAlerts();
    cancelMutation.mutate(
      {
        id: orderId,
      },
      {
        onError: (error, variables) => {
          /**
           * If used here, simultaneous errored cancels will only show the last one
           */
          addOrderAlert({
            orderId: variables.id,
            errorCode: error.message,
          });
        },
      }
    );
  };

If I fire cancellation of order 1 and then immediately fire cancellation of order 2 before the first one finishes (and both are about to fail), onError will be called only once.

Why is this happening?

[TkDodo]

onError will be called only once.

this is documented here: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#consecutive-mutations

[swingthrough]

My bad, somehow I missed that one...
I guess it should be updated here as well?
useMutation
It only mentions onSuccess here:

If you make multiple requests, onSuccess will fire only after the latest call you've made.

---

Ok, so I move addOrderAlert to useMutation's onError instead of mutate's onError to have it called for each cancellation.

Then if I want the following criteria met:

1. keep cancelMutation in isPending === true until it finishes refetching the orders after invalidation
2. add an error alert only after it is no longer pending

To meet 1, I need to await the invalidation - since I want to do it for both error and success, onSettled is the place to go.

To meet 2, I can't call addAlert in onError, otherwise I would have to await the invalidation before that (since onSettled is called after onError), which would mean I need to remove the invalidation from onSettled, and have it duplicated - once in onSuccess and once in onError. So if I want to keep it in onSettled only, the following code is the way:

const cancelMutation = useMutation({
  mutationKey: ["cancelOrder"],
  mutationFn: async (variables: CancelOrderRequest) =>
    cancelMockOrder(variables.id),
  onSettled: async (_data, error, variables) => {
    await queryClient.invalidateQueries({
      queryKey: ["orders"],
    });
    if (error) {
      addOrderAlert({
        orderId: variables.id,
        code: error.message,
      });
    } else {
      // potentially show success alert
    }
  },
});

Here is a codesandbox - seems to work well.

Am I correct with the statements above?

EDIT: Although now when I think about it, if I extracted the whole mutation to useCancelOrderMutation hook that allows caller to pass onSuccess, onError and onSettled, where onSettled does this:

onSettled: async (data, error, variables, context) => {
  await queryClient.invalidateQueries({
    queryKey: ["orders"],
  });
  return onSettled?.(data, error, variables, context); // call the passed in `onSettled`
},

The caller would have to know to put addOrderAlert (or anything that one wants to happen after refetch is already finished) to the passed onSettled to still meet the criteria. So maybe for this case it would make more sense to not have it in onSettled and have it duplicated in onSuccess and onError, like in this codesandbox example.

---

Also another thing is, I am using useMutationState to find out which row should have "cancel" button disabled and loading, so in OrdersList I have this:

const variables = useMutationState<CancelOrderRequest>({
  filters: {
    mutationKey: ["cancelOrder"],
    status: "pending",
  },
  select: (mutation) => mutation.state.variables as CancelOrderRequest,
});

and then when mapping over the orders, for each order I have:

const isBeingCancelled = variables.some((v) => v.id === order.id);

Since useMutationState is only available since v5, how would it be done in previous versions?
Would I have to create some additional state, something like ordersBeingCancelled and handle it manually, e.g. via useCancelOrderMutation's callbacks - add to the state in onMutate, remove from the state in onSettled, or is there some other way to access mutation state?

[swingthrough]

For the second part about the useMutationState not available in previous versions, I found out I can do it with useIsMutating when mapping over each order:

const isCancellingOrder = useIsMutating({
  mutationKey: ["cancelOrder"],
  status: "pending",
  predicate: (mutation) =>
    (mutation.state.variables as CancelOrderRequest).id === order.id,
});

In fact I like this even better than using useMutationState. Here is a codesandbox.