How to pass an argument to a function in my backend using .fetch()? ReactJS + Node

Question

So I want to pass an integer argument to a function in my backend and have it return the data. I've been looking through the documentation and it seems like there might not be a way for me to pass an argument via the code I currently have. I just want second opinions before I consider using a different approach.

Frontend:

//is there a way for me to pass num to req in the backend?
newMarker = (num) => {
      fetch('/api/getMarkers')
      .then(res => res.json())
      .then(mark => this.setState({ markers: mark }))
  }

Backend:

//function where argument needs to be passed to, used in the request below
const fillNewMarker = async function fillNewMarker(num){
  let temp;
  let data;
  await populartimes(markers[num].placeID)
  .then(out => {data = out; temp = 'Currently ' + data.now.currently + ' full.'})
  .catch(() => {temp = 'There is currently no data available.'});
  markers[num].busy = temp;
}

//request
//i need num to be passed to req here
app.get('/api/newMarker', async (req,res) => {
    await fillNewMarker(req);
    console.log('Retrieve Data For New Marker Complete')
    var mark = markers;
    res.json(mark);
    console.log('Sent Markers');
    console.log(markers);
})

I've been working for quite a while so my brain is a little bit fried, there might be a really obvious solution that I have missed - if so, I apologize for my ignorance. Help is appreciated! TIA :)

Fix Attemp #1:

//Front end
  newMarker = (num) => {
      fetch('/api/newMarker', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
          // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: JSON.stringify(num) // body data type must match "Content-Type" 
        header
      })
      .then(res => res.json())
      .then(mark => this.setState({ markers: mark }))
  }

//method call via button
onButtonClick(){
  this.newMarker(6)
  //6 for testing
}

//backend
app.get('/api/newMarker', async (req,res) => {
    console.log('Request received')
    await fillNewMarker(req.body.num);
    console.log('Retrieve Data For New Marker Complete')
    var mark = markers;
    res.json(mark);
    console.log('Sent Markers');
    console.log(markers);
})

Does this answer your question? [Setting query string using Fetch GET request](https://stackoverflow.com/questions/35038857/setting-query-string-using-fetch-get-request) — Bruno Paulino, Jun 26 '20 at 04:06
Hm not exactly, I tried implementing what the answer suggested with the URLSearch params but I get the problem where my request isn't even received. — ZKJ, Jun 26 '20 at 23:08

DevLoverUmar · Answer 1 · 2020-06-26T04:54:59.610

2

You can pass an argument to fetch in the form of an object like

const response = await fetch('/api/getMarkers', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: JSON.stringify(num) // body data type must match "Content-Type" header
  });
mark = await response.json();
this.setState({ markers: mark })

On backend receive the argument as req.body.arg_name ,In your case it would be req.body.num

edited Jun 26 '20 at 04:54

answered Jun 26 '20 at 04:04

DevLoverUmar

11,809
11
68
98

will the argument be passed as the req argument in my backend?(in my post). I tried only inserting the object you wrote to the code I posted as fetch's second param but it did not work :( – ZKJ Jun 26 '20 at 04:48
1

did you try with req.body.num – DevLoverUmar Jun 26 '20 at 05:21
1

I did. it seems that the request is not even being called after I added the second parameter to fetch. I added a console.log statement to the very beginning of the request and it isnt printing. I added my exact code to my post, please have a look, thank you :) – ZKJ Jun 26 '20 at 15:30
1

Note: I have also tried using the exact code you gave and making my function in the frontend an async - still no luck :/ request is not recieved. – ZKJ Jun 26 '20 at 15:39

How to pass an argument to a function in my backend using .fetch()? ReactJS + Node

1 Answers1