REST Api: Cannot fetch data in front end (NodeJS/React)

Question

I'm trying to send data from a JSON file available on the server side, to the front end. The data is available on the back end when called on Postman, however when I call listPhones() on the front, it's returning as undefined. I hope this is clear enough:

Back end route:

const express = require('express');
const router = express.Router();
const data = require('./../data/phones.json');

router.get('/', (req, res, next) => {
  res.json({ data });
});

---------------------------------------------------------

Front end proxy (the base URL is mounted on "api"):
 import api from './api';

export const listPhones = () => {
  api.get('/phones').then(response => response.data);
};

--------------------------------------------------------

Page to be rendered using listPhones a service:
  const [phones, setPhones] = useState([]);

  useEffect(() => {
    listPhones().then(data => {
      setPhones(data.phones);
    });
  }, []);

lpizzinidev · Accepted Answer · 2022-07-21 12:38:08Z

1

Your listPhones function should return the Promise if you want to handle the response in the useEffect:

export const listPhones = () => {
  return api.get('/phones');
};

You should then be able to access the data with:

useEffect(() => {
    listPhones().then(response => {
      setPhones(response.data);
    }).catch(err => console.log(err));
  }, []);

answered Jul 21, 2022 at 12:38

lpizzinidev

13.3k2 gold badges15 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

REST Api: Cannot fetch data in front end (NodeJS/React)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related