React UseFetch cannot retreive json data from error response

Question

I am still quite new to React, I was trying to create some dynamic content and managing Errors with Usefetch.

getting data from 20x response codes is fine. however when response code is error (40x, 50x) I cannot get the response body.

here for example my reponse replies status 400: Bad request: content-type "application/json" { message: "My Custom Error Message" }

import React from "react";
import {useFetch} from "react-async";


const Feedback = () => {

  const myRequest= useFecth("my_api_url");

  if (myRequest.isPending)
    return("Be Patient"); // works fine

  if (myRequest.isFullfilled)
    return(myRequest.data.myJsonObject); // works fine

  if (myRequest.isRejected)
    return(myRequest.error.message); // only shows 400 bad request

  return(null); // request was not sent yet, don't bother
}

I can't seem to find the body in myRequest.error, and myRequest.data is empty (since myRequest.isRejected)

Is there a way to retreive response body when the http status code is error?

Answer 1

Thank you for your response:

Regaring library versions, reading my package.json:

"dependancies": {
    "react": "^17.0.2",
    "react-async": "^10.0.1"
}

import React from "react";
import {useFetch} from "react-async";


const Feedback = () => {

  const myRequest= useFecth("my_api_url");

  if (myRequest.isPending)
    return("Be Patient"); // works fine

  if (myRequest.isFullfilled)
    return("data: " + myRequest.data.myJsonObject);
  if (myRequest.isRejected)
    return("error: " + myRequest.data.myJsonObject); // OUCH!

  return(null); // request was not sent yet, don't bother
}

I seperated Fullfilled and Rejected status because it fits the idea of what I want to do.

I get Uncaught (in promise) TypeError: myRequest.data is undefined which is what I understood from the react-async documentation:

data
any
Last resolved promise value, maintained when new error arrives.

data is updated only when isFullfilled. error is updated only when isRejected.

Moreover JSON.stringify(myRequest.value) returns {"response": {}}

Answer 2

Final solution:

I attempted to run this code locally and it seems, that this is not possible to be done via react-async lib. I also tested axios lib with the same result. It seems like using built-in fetch() method is only solution to your problem.

Old attempt of fix:

Can you tell which exactly library are you using?

The problem is that you are reading Response.error.message and in case of error, it's expected to receive "400 bad request". Try this:

import React from "react";
import {useFetch} from "react-async";


const Feedback = () => {

  const myRequest = useFetch("my_api_url");

  if (myRequest.isPending)
    return("Be Patient"); // works fine

  if (myRequest.isFullfilled || myRequest.isRejected)
    return(Response.data.myJsonObject); // should show response body (even if it was an error response)

  return(null); // request was not sent yet, don't bother
}

EDIT: Fixed obvious typo - IsPending -> isPending EDIT2: Another typo: useFecht -> useFetch