API not returning the correct JSON (react/express/axios)

Question

I feel like this should be a duplicate...If it is I'm not finding the correct thread.

I have an Express API (using mongoose) on a server with React front end. The API should return a JSON to the client.

Problem: It works fine with Postman but returns the wrong JSON in React

What I'm sending in Postman (this generates a correct response):

{"fileHashValue"
:
"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"}

Server Code:

app.get("/userData", function(req, res) {
  const fileHashValue = req.body.fileHashValue;
  UserData = UserData.findOne(
    {
      fileHashValue
    },
    function(err, userdata) {
      res.json({
        userdata
      });
    }
  );
});

Client Code:

componentDidMount() {
  axios
    .get(
      "http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData",
      {
        fileHashValue:
          "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
      }
    )
    .then(res => {
      console.log(res.data);
    });
}

It seems like this should all work, but its responding as if I had sent a blank request. IE, if I send a blank request in Postman it gives me the same result that I'm logging in React. Any help is appreciated, thanks!

Treycos · Accepted Answer · 2018-12-18 19:40:16Z

3

The function axios.get() is expecting a request config as the second parameter (not your raw params).

You can set your params as follows:

axios.get("http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData", {
    params: {
        fileHashValue: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
    }
})
.then(res => {
        console.log(res.data);
});

A more detailed explanation : https://flaviocopes.com/axios/#get-requests

As the other answer mentioned, using the get verb may not fit your needs. Get is mostly used to fetch a ressource and is not able to contain a body. Using post can prevent this. Post is mostly used to create a ressource and can have a body :

axios.post("http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData", {
    params: {
        fileHashValue: "e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855"
    }
})
.then(res => {
        console.log(res.data);
});

If your objective really is to simply get an element, I suggest changing your routes architecture to include the id that you are attempting to get in the url :

axios.get("http://ec2-52-53-190-3.us-west-1.compute.amazonaws.com:3000/userData/e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855", {})
.then(res => {
        console.log(res.data);
});

And adapt your backend :

app.get("/userData/:id", function(req, res)

The id will then be accessible in req.params.id

edited Dec 18, 2018 at 19:40

answered Dec 17, 2018 at 15:24

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Hanley Soilsmith Over a year ago

Thank you for the response. Unfortunately this is displaying the same log as in the original question.

Treycos Over a year ago

Weird, can you print out what's in your req.body variable on the back-end ?

Treycos Over a year ago

Also, what is printed in the network part of your browser's console after sending the request ?

Hanley Soilsmith Over a year ago

postman returns e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855 react returns "undefined" Thanks for your help, I need to leave for something else for a few hours, have a great day :)

Treycos Over a year ago

You'rewelcome, glad it could help someone. Well you know, I've never used axios myself, we're all newbies here

|

Hanley Soilsmith · Accepted Answer · 2018-12-18 02:12:16Z

1

As per the instructions in this thread, it is not recommended to .get (really at all). As a rookie, I never recall any of the tutorials mentioning this.

HTTP GET with request body

The answer to the question is to switch the client and server logic both to axios.post and send the json as shown in the original post.

answered Dec 18, 2018 at 2:12

Hanley Soilsmith

6392 gold badges12 silver badges28 bronze badges

Collectives™ on Stack Overflow

API not returning the correct JSON (react/express/axios)

2 Answers 2

10 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related