React how can you pass a variable to a get request

Question

I'm trying to query from a table where the teacherId is equal to the teacherId of the person that logs in but I can't pass that teacherId from the front-end to the back-end.

This is the back end

app.get("/api/get", async(req,res) => {
    const teacherId = req.body.teacherId
    connection.query(
        "SELECT class FROM homework WHERE teacherID = ?",
        [teacherId],
        (err, result) => {
            if (result){
                res.send({ message: result })
            } else{
                console.log(err)
            }
        }
    )
})

This is the front end

 useEffect(() => {
        Axios.get("http://localhost:1337/api/get", {
            teacherId: teacherId
        }).then((response) => {
            if(response){
                setDisplayHomework(response.data.message)
            } else{
                console.log("error")
            }
        })
    })

const teacherId = localStorage.getItem("teacherId")

I think the problem lies where it says teacherId: teacherId but I don't know why.

@Alessandro No I want to pass the variable teacherId from the front end to the back end — Saif Khadraoui, Dec 16 '21 at 21:39

score 3 · Accepted Answer · answered Dec 16 '21 at 21:38

You need to use

Axios.get("http://localhost:1337/api/get", {
     params: { teacherId }
 });

and use req.query.teacherId to read it

If you see the Axios.get signature it is

axios.get(url[, config])

in contrast to

axios.post(url[, data[, config]])

which passes the data as the second argument.

That is because the body in GET requests is not used by the servers. Read HTTP GET with request body for more on this.

score 0 · Answer 2 · answered Dec 16 '21 at 21:42

0

Usually you do not send a body with a get request. Put the teacher id into the url. Then this is called path variable.

app.use('/teacher/:teacherId', function(req, res, next) {
  console.log(req.params.teacherId);
  next();
})

answered Dec 16 '21 at 21:42

Matthias Wiedemann

1,313
12
22

score 0 · Answer 3 · answered Dec 16 '21 at 21:42

Get requests don't have request bodies unlike post requests, as such the Axios.get function shouldn't have a second parameter for the body. Instead pass your parameters as a url, like this:

useEffect(() => {
        Axios.get("http://localhost:1337/api/get?teacherId="+teacherId).then((response) => {
            if(response){
                setDisplayHomework(response.data.message)
            } else{
                console.log("error")
            }
        })
    })

Then in your backend code use req.params to access the get request url parameters:

app.get("/api/get", async(req,res) => {
    const teacherId = req.params.teacherId
    connection.query(
        "SELECT class FROM homework WHERE teacherID = ?",
        [teacherId],
        (err, result) => {
            if (result){
                res.send({ message: result })
            } else{
                console.log(err)
            }
        }
    )
})

React how can you pass a variable to a get request

3 Answers3