React-query mutation isError not setting true on failed POST

user_9705498 0
Viewed 1441

I am using the following fetch post request to create an item in my DB. I am trying to use react-query to detect the error thrown by the request.

export function createItem(id, body, token) {
  fetch(`${API_URL}/${id}/items`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
    body: JSON.stringify(body)
  })
    .then(res => {
      if (res.ok) {
        return res.json()
      }

      console.log(res.status)

      throw new Error("Error creating review")
    })
    .catch((err) => console.log(err))
}

I have the mutation set like so:

const mutation = useMutation(() => {
    return createItem(props.item.id, item, token)
})

And its called with:

<Button disabled={!valid} onPress={() => mutation.mutate()}>
    Submit
</Button>

I use this logic to display the error:

{
   mutation.isError && <Text>{mutation.error.message}</Text>
}

I see the createItem function errors with a 400 status code which is what I expect but react-query does not set isError to true. Instead isSuccess is true. Am I handling the error wrong some how?

react-query expo react-native reactjs fetch
2 Answers

From the react query docs, they return a promise to the mutation, so try to change your function createItem to the following:

export function createItem(id, body, token) {
  // return the fetch as a promise
  return fetch(`${API_URL}/${id}/items`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
    body: JSON.stringify(body)
  })
  // remove then and catch here
user_128987480

The problem is that you are catching the error inside the mutation function. React Query requires to you to return a resolved or rejected promise from your function.

Promise.catch also returns a Promise. If you don't return anything, it will be a Promise that returns undefined. But that is still a resolved Promise that will be passed to React Query.

So, in short: Don't catch inside the function. Use one of the callbacks that react-query provides for error logging:

export function createItem(id, body, token) {
  fetch(`${API_URL}/${id}/items`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` },
    body: JSON.stringify(body)
  })
    .then(res => {
      if (res.ok) {
        return res.json()
      }

      console.log(res.status)

      throw new Error("Error creating review")
    })
}

const mutation = useMutation(
  () => {
    return createItem(props.item.id, item, token)
  },
  {
    onError: (error) => console.log(error)
  }
)
user_84053100
Related