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?

myRequest.IsPending => myRequest.isPending, no? Surely the hook doesn't use a capital I there? — T.J. Crowder
– T.J. Crowder, Commented Feb 4, 2022 at 12:35
Wow, the documentation for that is sparse. It's clear that error will not be what you want, but I'm not immediately seeing a way to tget it. — T.J. Crowder
– T.J. Crowder, Commented Feb 4, 2022 at 12:44

Thibault LESCAIL · Accepted Answer · 2022-02-04 14:08:07Z

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": {}}

Kongo · Accepted Answer · 2022-02-04 14:51:48Z

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

Collectives™ on Stack Overflow

React UseFetch cannot retreive json data from error response

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related