CODEWITHSUNDEEP
javascriptreactjsexpressgetaxios
mandmeier
mandmeier

Reputation: 409

axios.post not returning data from server: "Cannot destructure property 'data' of '(intermediate value)' as it is undefined"

I am trying to get data from server via axios.post().

Decided to use POST and not GET because I want to send an array with ids to look up in the database, which might be too large to fit in GET query params.

I managed to send an array with ids in the body of the POST. This reaches my server. I can successfully find the items in the data base. The items are then returned in the response. The data shows up in Chrome devtools > Network (status 200). I also get the right stuff back when sending a request manually using Postman.

Everything seems to be working fine, but the response does not arrive in my data variable in the axios function.

I spent the day trying out the solutions to all the similar answers here. Nothing worked...

I also tried GET and sending the ids in query params instead, which gives the same error. I suspect I am doing something wrong with async/await because I am getting this "intermediate value" thingy.

Thanks in advance for the help.

CLIENT axios functions

const url = 'http://localhost:5000';

export const getStuff = Ids => {
  axios.post(
    `${url}/cart/stuff`,
    {
      Ids: Ids,
    },
    {
      headers: {
        'Content-Type': 'application/json',
      },
    }
  );
};

CLIENT actions

import * as api from '../api';

export const getStuff = Ids => async dispatch => {
  try {

    // Ids is an array like ["5fnjknfdax", "5rknfdalfk"]

    const { data } = await api.getStuff(Ids);
    // this gives me the error in the title, data never comes through

    //dispatch(-dolater-);

  } catch (error) {
    console.log(error);
  }
};

SERVER controllers

export const getStuff = async (req, res) => {
  try {
    const { Ids } = req.body;
    const stuff = await STUFF.find().where('_id').in(Ids);
    console.log('SERVER', stuff);
    // this works until here. request comes through and
    // I can successfully find the stuff I want in the database
    res.status(200).json(stuff); // this also works, response is being sent
  } catch (error) {
    res.status(404).json({ message: error });
  }
};

SERVER routes

router.post('/cart/stuff', getStuff);

Upvotes: 2

Views: 10109

Answers (2)

Subham
Subham

Reputation: 1

export const fetchPost = () => {
  return axios.get(url);
};

This works for me!!

Upvotes: 0

acomputerdog
acomputerdog

Reputation: 306

You have some extra curly braces here (or a missing return, depending on how you look at it). When you use a lambda (arrow function) with curly braces, you have to explicitly return a value or else it will return undefined. Change your code from this:

export const getStuff = Ids => {
  axios.post(...);
};

to one of these:

// Option 1
export const getStuff = Ids => {
  return axios.post(...);
};

// Option 2
export const getStuff = Ids => axios.post(...);

Either format will return the actual axios promise, instead of the default undefined.

Upvotes: 3

Related Questions