How to get a variable from Frontend to the Backend using get API in reactjs with Express API

Question

I want to get information from my freight Shipment table in order to process other information I need to do in the frontend. But I don't know how to grab the email of the logged-in user using Axios.get() method to use it to query my MySQL DB.

in my frontend, I defined a useState of loggedEmail and I am setting it to the currently logged-in user. how can I pass that to my backend using the GET method?

here is my code:

server:

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

    const email = req.body. //how would i get the email from the front end to use it in my query?
    db.query("SELECT * FROM freight_shipment WHERE user_email = ?", email, (err, result) => {
        if(err){
            console.log(err)
        }
        if(result.length > 0 ){
            res.send(result);
        }
    });
});

Frontend:

const [loggedEmail,setLoggedEmail] = useState("");
    Axios.defaults.withCredentials = true;
    useEffect(() => {
        Axios.get('http://localhost:3001/login').then((response) => {

            if(response.data.loggedIn == true){
                setLoggedEmail(response.data.user[0].email)
                setLoginStatus(response.data.loggedIn);
                console.log(response.data.loggedIn)
            }
        })
    },[]);

useEffect(() => {
        Axios.get("http://localhost:3001/api/freightID").then((response) => {
            console.log(response);
        })
    });

Ryan Le · Accepted Answer · 2021-09-11 07:06:41Z

1

There is a config object in Axios.get where you can put your params there to send them to BE

You would use it like so:

Axios.get("http://localhost:3001/api/freightID", {
  params: { email: loggedEmail },  //<-- Put params here
}).then((response) => {
  console.log(response);
});

Then in your BE, you would get it like so:

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

    const email = req.query.email //<-- It's here in the req.query
    db.query("SELECT * FROM freight_shipment WHERE user_email = ?", email, (err, result) => {
        if(err){
            console.log(err)
        }
        if(result.length > 0 ){
            res.send(result);
        }
    });
});

edited Sep 11, 2021 at 7:06

answered Sep 11, 2021 at 7:01

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

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

Comments

xpertdev · Accepted Answer · 2021-09-11 07:07:57Z

0

You can pass the loggedEmailin Get as a query param or path param.

Please take a look at this article. https://masteringjs.io/tutorials/axios/get-query-params.

In your case you can do like:

const params = {
  loggedInUserEmail: loggedEmailin 
};
Axios.get(`http://localhost:3001/api/freightID/{params.loggedInUserEmail}`)

and in Server side you can get value

app.get('/api/freightID/:email', (req, res) => {}) etc ... ///

var end = req.params['email']

answered Sep 11, 2021 at 7:07

xpertdev

1,4432 gold badges10 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to get a variable from Frontend to the Backend using get API in reactjs with Express API

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related