useMutation Unhandled Runtime Error using axios

[jeepers3327]

I just want to ask how do I handle POST request error using axios. When I try to add onError option to useMutation it doesn't called.
I'm using NextJS without SSR fetching.

So I have this following API call

const sampleAPI = () => axios.post('request-url')

then I used it like this

export default function MyIndex() {
   const mutation = useMutation(sampleApi, onError: (err) => console.log(err))
   
 
  return (
  <div>
   <button onClick={() => mutation.mutate()}>Click me</button>
  </div>
 )

}

When clicked, no error is being logged and NextJS reports a Unhandled Runtime Error. Do I have to wrap a try..catch.. in my sampleAPI?

I also created a sandbox link https://codesandbox.io/s/currying-frost-r2wlx3

[TkDodo]

the sandbox looks fine for me. on click, I see 3 log messages:

two are from your onError handling, and one is from react-query because we log errors to the console per default via our logger.

[jeepers3327]

I would like to ask if you also encountered this kind of error (refer to GIF I attached) when clicking on the button?

[TkDodo]

did you adapt the sandbox? Because now, it does:

onClick={() => mutation.mutateAsync()}

while before, and also in your posted code snippet, you're doing

onClick={() => mutation.mutate()}

and yes, that makes all the difference. mutate catches errors and returns nothing, mutateAsync gives you a Promise that can fail, which you must handle. I have written about this here: https://tkdodo.eu/blog/mastering-mutations-in-react-query#mutate-or-mutateasync

[jeepers3327]

@TkDodo I was using the wrong method. It works now.

thank you very much.