Get error response object

[fiskpatte]

Hi.
A mutation I'm calling fails with 400, and in devtools I see the response:
{"error":{"code":"INVALID_INPUT","message":"An application must have at least one redirect uri","data":null}}
However, when I access the error.message from the useMutation hook, the value is just "Request failed with status code 400". How do I access the response error text in useMutation?

Sorry for this noob question but I can't figure it out.

[TkDodo]

It depends on what you are using for data fetching, react-query is completely agnostic in that regard.

• If you are using axios, it will give you an AxiosError which has the json body somewhere in error.response.data or so.
• If you are using fetch, you have to json parse the body yourselves via error.response.json().
• If you are using something else, I don't know, please consult the docs of your fetching library :)

[TkDodo]

@imbishalgiri see: https://tkdodo.eu/blog/react-query-and-type-script#what-about-error

[wonghin]

It works fine. Thank you

The solution would be
error['response'].data, so that there is no error in the editor (vscode)

[wonghin]

In Tanstack query, it would be
onError:(error)=>{console.log(error['response'].data)}

[onlyhasbi]

@wonghin thank you

[Queen-esther01]

This didnt work for me. Any idea why? This is what I get for error

Error: AxiosError: Request failed with status code 400
    at onResponseError (AxiosConfig.ts:156:10)
    at async uploadDocuments

[olajoao]

For those struggling with Axios: You can configure a global error handler using Axios response interceptors:

axiosInstance.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if (error.response) {
      // handle the error here
      // example 
      toast.error(error.response.data.message);
    } else if (error.request) {
    // or here
      console.log("error.request", error.request);
    } else {
    // or here
    // example
      toast.error(error.message);
      console.log("error.message", error.message);
    }

    return Promise.reject(error);
  }
);

Warning: If you use a toast component, every single error are going to be shown

[yousifalraheem]

Is there a way to modify the error before it is stored in the error property? For example if I was running a request without useMutation, I would add an extra .catch that can "prettify" the error before it is ready to be consumed.

new Promise((_, reject) => reject("Error!"))
  .catch((e) => {
      if (e instanceof Error) throw e;
      if (typeof e === 'string') throw new Error(e);
      throw new Error('Unknown error');
  })

My expectation is that I can just pass my error mutation in the onError and still get the error that I prepared in the mutation.error

Full example:

const mutation = useMutation({
  mutationFn: async () => new Promise((_, reject) => reject("Error!")),
  onError: e => {
    if (e instanceof Error) throw e;
    if (typeof e === 'string') throw new Error(e);
    throw new Error('Unknown error');
  },
});

mutation.error.message // should be 'Unknown error', instead I get nothing, stuck on loading

[TkDodo]

onError is a way to “handle” the error you get back, not to transform errors. Just return the error you want from the mutationFn.