Accessing response error data in next.js using SWR

Question

I have a form data which on submit I a sending to backend if there is an error I have process the error and show it on page. Request is getting posted fine but when getting a backend response I never go to catch error loop. Appreciate any help in resolving this.

Thanks

const [errorMessage, setErrorMessage] = useState('')

 mutate(
  `${api}`,
  fetcher('POST', `${api`, body: JSON.stringify(data))
)
  .then((data) => {
   ... do something
  })
  .catch((error) => {
         setErrorMessage(data.error.message)
        console.error(error)
  })

}

backend response data :  
{"trace_id":"abc","errors":[{"code":122,"message":" Error While 
  Submitting."}]}

score 0 · Accepted Answer · answered Sep 01 '22 at 17:58

The .catch clause will only fire if there is an error executing the network request. But in this case, it's working - it sends a request and gets a response. So only the then clause is fired. However, the response contains an error.

There are a few ways to make it so the error response gets 'caught' - either you configure your graphql library to look inside each response to check for 'errors' property to be non-empty and throw, or you can do that inside the then clause in your example.

Accessing response error data in next.js using SWR

1 Answers1