Multiple fields with same key in query params (axios request)?

So the backend (not under my control) requires a query string like this:

http://example.com/?foo=5&foo=2&foo=11

But axios uses a JS object to send the request params:

axios.get('http://example.com/', { foo: 5 });

And obviously an object can’t have multiple fields with the same key.

How can I send a request with multiple fields with the same key?

Answer

From the Request Config section of the axios documentation:

  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },

To use this in a request, you would do

const request = {
  params: {
    foo: [5, 2, 11]
  }
}
axios.get('http://example.com/', request);

The issue with using a plain object is that array parameters are added as

http://example.com/?foo[]=5&foo[]=2&foo[]=11

To make a request to a URL without the [], use URLSearchParams

var params = new URLSearchParams();
params.append("foo", 5);
params.append("foo", 2);
params.append("foo", 11);
var request = {
  params: params
};
axios.get('http://example.com/', request);

This will result in a request to

http://example.com/?foo=5&foo=2&foo=11