why useMutation onError never gets fired even when the server is down or API responds with 500?

[ritikbanger]

Version: "react-query": "^3.39.1",

I am using useMutation hook and calling the mutateAsync function. The onSuccess of mutationAync fires always even when the API does not respond or responds with error code 500 or it fails.

Why onError is not triggered in such cases, is there a need to pass something explicitly somewhere or am I missing something here.

By defination of onError: This function will fire if the mutation encounters an error and will be passed the error.
If a promise is returned, it will be awaited and resolved before proceeding.

Since, if the api fails, the mutation will not receive any results or there will be no response but still onError is not trigerred.
Code:

  const { mutateAsync } = useMutation(
    (params: { some Param goes here}) => {
      return backendServiceCall(params)
    }
  )
<!-- some code goes here -->
 const functionThatCallsTheMutateAsync = async () => {
    await mutateAsync(
      { params },
      {
        onSuccess: () => {
          sendMessage('success')
        },
        onError: () => sendMessage('error' ),
      }
    )
  }

functionThatCallsTheMutateAsync()

Case: API Failure
Output: success

[TkDodo]

Since, if the api fails, the mutation will not receive any results or there will be no response but still onError is not trigerred.

you are not showing your api function :/ very likely, it doesn't return a rejected promise in case of an "error code 500". For example, the browser native fetch API will behave this way...

[ritikbanger]

Any update on this @TkDodo

[TkDodo]

if you want me to look further into this, at least provide a codesandbox reproduction that shows your issue please

[ritikbanger]

Without backend, how can I create a codsandbox here.

[TkDodo]

You have the query function return Promise.resolve directly with some json data?

[ritikbanger]

Yes. I respond with the JSON data and the status.

[acharyayush]

yeah same problem.

//mutation hook
const { data, mutate: mutateCustomer } = useMutation({
    mutationFn: createCustomer,
    onSuccess: () => {
      console.log("navigated")
      navigate("/")
    },
    onError: () => {
      console.log("error occured")
    },
  })
//api.js
//i have BASEURL
export const createCustomer = async (customerDetail) => {
  try {
    const { data } = await axios.post(
      `${BASEURL}/api/65865d8b75a727705c869123/customers/add`,
      customerDetail
    )
    toast("success", "New customer is created 😁")
    return data
  } catch (err) {
    toast("error", err.message)
    return err
  }
}

if i submit with empty customer details, i get internal server error but onSuccess gets triggered and page is navigated to homepage, onError never gets triggerred...

[TkDodo]

} catch (err) {
toast("error", err.message)
- return err
+ throw err
}

sorry but y'all need to learn how promises work, or at least read my blog because I've answered this exact question so many times that I've put it in my FAQ a long time ago:

• https://tkdodo.eu/blog/react-query-fa-qs#logging

[acharyayush]

Thank you for answering and for the blog.

[deeseeker]

This came in very handy for me in my project. It took me a while before I found this but very helpful. Long live TkDodo

[hokwanhung]

This solved one of my biggest questions about useMutation. Thank you @TkDodo!