ReactJS / NodeJS: How to pass variables to backend in api request

Question

I am working on building a website and wish to expand my API functionality. I have a frontend react app and a backend express nodejs server.

I have another local webserver that hosts some data about football matches. Data about the round and year is served by calling /nrl/week={week}&season={year}.

The react app is currently set up such that axios sends a request to the backend and the backend sends a request to the other webserver.

const data = await axios.get('/nrl') frontend code

request('http://127.0.0.1:5000/nrl/week=20&season=2022', backend code

I want to be able to make a request from the front end to the backend specifying what week and season, as currently its hardcoded.

Thanks

request is deprecated and has been for some time. I would recommend Axios or got — Phil
– Phil, Commented Jul 22, 2022 at 5:40
Are you sure that URL is correct? Usually URL query parameters start with a ? — Phil
– Phil, Commented Jul 22, 2022 at 5:43
Axios works in the backend side of this too? I'll change it. Ill double check the URL — Bigred
– Bigred, Commented Jul 22, 2022 at 6:29

Phil · Accepted Answer · 2022-07-22 06:47:27Z

1

Make your request from the front-end with URL query parameters and forward those through to the other API

Front-end

// These will probably come from user selection / input
const week = 20;
const season = 2022;

const { data } = await axios.get("/nrl", {
  params: { week, season }
});

Express

app.get("/nrl", async (req, res, next) => {
  const queryParams = new URLSearchParams(req.query);

  // FYI `request` is deprecated. See https://github.com/request/request/issues/3142
  request(
    `http://127.0.0.1:5000/nrl/?${queryParams}`,
    (err, response, body) => {
      if (err) {
        console.error(err);
        return next(err);
      }

      res.type(response.headers["content-type"]).send(body);
    }
  );

  // or if you switch to Axios
  try {
    const { data } = await axios.get("http://127.0.0.1:5000/nrl/", {
      params: req.query,
    });
    res.send(data);
  } catch (err) {
    console.error(err.toJSON());
    next(err);
  }
});

edited Jul 22, 2022 at 6:47

answered Jul 22, 2022 at 5:45

Phil

166k25 gold badges265 silver badges269 bronze badges

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

2 Comments

Bigred Over a year ago

How does my frontend request know to use that particular backend controller? I don't understand how its called.

Phil Over a year ago

@Bigred I assumed you already had an app route handling /nrl. I've updated my answer to be a bit more specific

Collectives™ on Stack Overflow

ReactJS / NodeJS: How to pass variables to backend in api request

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related