Prevent useErrorBoundary from mutate-level onError

[czterystaczwarty]

Is it possible to prevent throwing error to render phase to ErrorBoundary, when exception is handled in mutate-level onError?

const [mutate] = useMutation(() => Promise.reject({ status: 422 }), {
  useErrorBoundary: true,
  throwOnError: true
})

try {
  await mutate(payload, {
    onError: (error) => {
      if (error.status === 422) return false // or something else to prevent useErrorBoundary
    }
  })
} catch (error) {
  return handleError();
}

Alternatively prevent useMutation-level onError:

const [mutate] = useMutation(() => Promise.reject({ status: 422 }), {
  onError: (_, _, _, isPrevented) => {
    if (isPrevented) return
   // useEffect to throw to render phase
  }
  throwOnError: true
})

I have one customHook for many API endpoints and I want to have global handling only if the specific one is not defined.

In other words: how to rethrow error to render phase only, when exception was not handled imperatively ?

[czterystaczwarty]

I could conditionally rethrow error from first onError, but I still have to return the value from catch.
https://github.com/tannerlinsley/react-query/blob/1570afff850e83223f9cbff9690a84d7e1edb2eb/src/useMutation.js#L120

[tannerlinsley]

Technically, you can return a never-resolving promise to onError and it will stop the remaining flow from executing (this includes onSettled's and also the actual error stat dispatcher though...) so it may not be a perfect solution. Maybe in the next major version, onError will become an actual handler where you are expected to rethrow the error if you want it to keep propagating.

[czterystaczwarty]

For now, I'm throwing the exception myself instead of using useErrorBoundary:

const handlerServerErrors = useHandleServerErrors();
const [ mutate ] = useMyOwnQueryHook();
const handleSubmit = async (message) => {
    try {
      await mutate(payload);
    } catch (error) {
      return handlerServerErrors(error);
    }
  };

const useHandleServerErrors = () => {
  const setError = useErrorState();

  return (errors) => {
    if (isErrorToHandleFn(error)) {
      // handle error
    }
    setError(errors); // rethrow to render phase
  };
};

I just added feature request to cover that case: #539