How to send url params from react to express api call

Question

So i'm making a fetch request from react to express and the api url requires params but I want the last bit of the url to be dynamic. How would I send a param from react to the api url in express? Heres the code

react

const [dynamic, setDynamic] = useState("somevalue")

  useEffect(() => {
    async function fetchData() { 
        const response = await fetch("/web")
        const data = await response.json()
        console.log(data)
    }
    fetchData()
  }, [dynamic])

express.js

app.get("/web", async (req, res) => {
    const response = await fetch("https://alexa.com/api?Action=urlInfo&Url=")
      const data = await response.json()
      res.json(data)
})

Basically, I would like the dynamic state value to be injected into the end of the URL in express.

Something like

react

const [dynamic, setDynamic] = useState("somevalue")

    async function fetchData() { 
        const response = await fetch("/web" + dynamic)
        const data = await response.json()
        console.log(data)
      }

Then in express when the API is called the URL changes to

const response = await fetch("https://alexa.com/api?Action=urlInfo&Url=somevalue")

How can I go about achieving this?

You can either use query parameters (like '/web/foo?key1=value1&key2=value2') or you can use url parameters (like '/web/foo/:param1/:param2'. In the case of url parameters, express does the work for you of matching your request urls to the appropriate handlers and extracting the url parameters as variables in the request.params object. In the case of query parameters, those end up in the url no matter what handler is matched and they end up in the request.query object. You can use that as a starting point to look further and see which of those methods makes sense for your use case. — nullromo
– nullromo, Commented Sep 14, 2021 at 22:18

Matt Morgan · Accepted Answer · 2021-09-14 22:35:51Z

5

You define the parameter on the route handler side, setting up a route that matches the desired pattern. For example:

app.get("/foo/bar/:myparam", async (req, res) => {
    //... here's your handler code
})

Will match /foo/bar/baz, and req.params.myparam === "baz" inside the handler.

http://expressjs.com/en/guide/routing.html#route-parameters

Using query params is similar, but you want to check the values of the req.query object instead, like:

// client side (React code)
await fetch("/foo/bar?myparam=baz")
...
// In your express handler:
req.query.myparam === "baz"

edited Sep 14, 2021 at 22:35

answered Sep 14, 2021 at 22:18

Matt Morgan

5,3334 gold badges23 silver badges34 bronze badges

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

Comments

Ahmed Hassan · Accepted Answer · 2021-09-14 22:48:04Z

3

Use Dynamic value in params of api call.

React code would look like this:

const [dynamic, setDynamic] = useState("somevalue")

useEffect(() => {
async function fetchData() { 
    const response = await fetch(`/web/${dynamic}`)
    const data = await response.json()
    console.log(data)
}
fetchData()
}, [dynamic])

In Express.Js code define the parameter on the route handler side, and use that in fetch api call

app.get("/web/:value", async (req, res) => {
    const {value} = req.params;  
    const response = await fetch(`https://alexa.com/api?Action=urlInfo&Url=${value}`)
      const data = response.json()
      res.json(data)
})

answered Sep 14, 2021 at 22:48

Ahmed Hassan

5773 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to send url params from react to express api call

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