React Query handling response status codes

user_9798268 0
Viewed 5766

this is related to this question: Handling unauthorized request in react-query

I understand the point that React-Query doesnt care about responses codes because there is no error. So for example if the server respond with a 400 "Bad Request", do i have to check for this on the data returned by the muate function?

 const handleFormSubmit = async (credentials) => {
    const data = await mutateLogin(credentials);
    //  Do i have to check this data if for example i wanna show an error message 
    // "Invalid Credentials"?
 };

I need to save the user on the cache.

const useMutateLogin = () => {
  return useMutation(doLogin, {
  throwOnError: true,
  onSuccess: data => // Do i have to check here again if i receive the user or 400 code
  })
 }

Thanks.

react-query reactjs
1 Answers

react-query does not take care of the requests and it is completely agnostic of what you use to make them as long you have a Promise. From the documentation we have the following specification for the query function:

Must return a promise that will either resolves data or throws an error.

So if you need to fail on specific status codes, you should handle that in the query function.

The confusion comes because popular libraries usually take care of that for you. For example, axios and jQuery.ajax() will throw an error/reject if the HTTP status code falls out of the range of 2xx. If you use the Fetch API (like the discussion in the link you posted), the API won't reject on HTTP error status.

Your first code snippet:

const handleFormSubmit = async (credentials) => {
    const data = await mutateLogin(credentials);
 };

The content of data depends on the mutateLogin function implementation. If you are using axios, the promise will reject to any HTTP status code that falls out of the range of 2xx. If you use the Fetch API you need to check the status and throw the error or react-query will cache the whole response as received.

Your second code snippet:

const useMutateLogin = () => {
  return useMutation(doLogin, {
  throwOnError: true,
  onSuccess: data => // Do i have to check here again if i receive the user or 400 code
  })
 }

Here we have the same case as before. It depends on doLogin implementation.

user_26881520
Related