0

I am looping over an array of strings and want to pass these in chunks of 30 into the axios GET request as query params but I dont know how to do it correctly.

const ids = ["1","2", "3", "4", "5"] //up to 10K entries

What I need is 30 ids as a query parameter with the same key on each request like this

axios.get("/endpoint?id=1&id=2&id=3&id=4") ecetera. My approach doesnt work and I would welcome some tips on how to approach this correctly.

what I have

 const assets = await getRepository(Asset).find({ collection: collection })
      
      const token_ids = assets.map(a => {
        return a.token_id
      })

      const asset_count = assets.length;

      let config: AxiosRequestConfig = {
        headers: this.header,
        params: {
          limit: 50,
          offset: 0,
          side: 1,
          sale_kind: 0,
          order_by: "eth_price",
          order_direction: "asc",
          asset_contract_address: assets[0].asset_contract.address
        }
      }

      while (true) {
        const ids = token_ids.splice(0,30);   //get 30 ids for pagination (max)
        //apply ids to params

        for( let i=0; i< ids.length; i++){
          config.params["id"] = ids[i]; //this wont work cause duplicate keys arent allows
        }
        const response = await axios.get(this.API_BASE_URL + "/orders", config)
        //do something
      }
BitQueen
  • 585
  • 1
  • 6
  • 20
  • depends on how your back-end handle it, it could be `config.params["id[]"] = ids[i]`, but considering you are talking about 10K entries, you gonna to exceed the [limit of URL length](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers), please consider to use post or split the query into chunks – 0nepeop1e Feb 20 '22 at 11:40
  • the backend is a third party API that expects the parameters to be like I written in my post. ids=1&ids=2&ids=3 – BitQueen Feb 20 '22 at 11:41
  • then the wrong thing with your param is the key `"id"` is overridden, same was my suggestion, so you will need [URLSearchParam](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) instead, or `config.params[\`id[${i}]\`] = ids[i]` – 0nepeop1e Feb 20 '22 at 11:43
  • i know that my solution doesnt work and why. I am looking for a way to archieve what I need to do. I need multiple ids=n query parameters in the url thats get requested – BitQueen Feb 20 '22 at 11:44
  • 2
    here is how to use [URLSearchParam with axios](https://masteringjs.io/tutorials/axios/get-query-params), `URLSearchParam#append` doesn't override the key, it will append more value with same key – 0nepeop1e Feb 20 '22 at 11:45

1 Answers1

5

I found this method seems to get the correct url sent.

Adding a paramsSerializer method inside of the config will handle all the params sent. Then all you need is the logic to handle the values if they are in array format.

the urlPath response.request.path that was displayed using this method was as follows: /orders?limit=50&offset=0&side=1&sale_kind=0&order_by=eth_price&order_direction=asc&id=1&id=2&id=3&id=4&id=5

I am not sure why you had your requests being sent in a while loop but if you need that just add it back in.

const assets = await getRepository(Asset).find({ collection: collection })

const token_ids = assets.map(a => {
    return a.token_id
})

const asset_count = assets.length;

let config: AxiosRequestConfig = {
    headers: this.header,
    params: {
        limit: 50,
        offset: 0,
        side: 1,
        sale_kind: 0,
        order_by: "eth_price",
        order_direction: "asc",
        asset_contract_address: assets[0].asset_contract.address
    },
    paramsSerializer: function handleQuery(query) { // this will process params
        // This should query the params properly for you.
        return Object.entries(query).map(([key, value], i) => Array.isArray(value) ? `${key}=${value.join('&' + key + '=')}` : `${key}=${value}`).join('&');
    }
}


// put the ids all into a id array into the config.params object.
config.params.id = token_ids.splice(0, 30);

const response = await axios.get(this.API_BASE_URL + "/orders", config)
cigol on
  • 337
  • 3
  • 12