有没有办法传输客户端 React 状态/道具来完成后端 express（api 调用）

Question

I first created a react app that was making api calls on client side, which is a big no no since it exposes the API key. So I have to create a backend express server to make api calls. However on client side, my react app allows you to type in a random username(which changes the state) in order to make an api call and get that users information. Is there a way to transfer state/ props from client side to backend express to complete an api call?

Here is the Express Code:

const express = require('express');
const app = express();
const fetch = require('node-fetch');

app.get('/api/customers', (req, res) => {

    fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/huhi?api_key=<MY_API_KEY>')
    .then(res => res.json())
    .then(result => res.json(result));
});

const port = 5000;

app.listen(port, () => console.log(`Server started on port ${port}`))

in this section fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/huhi?api_key=<MY_API_KEY>') is there a way to change the username after 'by-name/' to reginald, doublelift, faker, etc(stored in the client-side react state).

example

fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/reginald?api_key=<MY_API_KEY>')

or

fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/doublelift?api_key=<MY_API_KEY>')

or

fetch('https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/faker?api_key=<MY_API_KEY>')

Answer 1

It depends on how you send the username to your API, and the body parsing middleware you set in your express application.

fetch(`uri/by-name/${req.params.username}`)
// OR
fetch(`uri/by-name/${req.query.username}`)
// OR
fetch(`uri/by-name/${req.body.username}`)

Answer 2

One of the solutions -

1. On Backend/Api endpoint -

    // ...    
    app.get("/api/customers/:userId", (req, res)=>{
           fetch(`https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/${req.params.userId}?api_key=<MY_API_KEY>`)
        .then(res => res.json())
        .then(result => res.json(result));
    })
    //...

2. On the client side - on-submit-username-through-input or on-username-state-change call the api point viz. -

fetch(`/api/customers/${this.state.username}`).then(users => this.setState(users))