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

Question

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 JS object to send the request params:

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

And obviously such object can't have multiple fields with the same key.

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

Solution 1

From the axios documentation on the request config

// `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

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

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

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

To get request without the [] like you want, you can use the 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 as

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

Solution 2

In Axios request config, you can override params serialization and then use QS NPM module to serialize array with repeat mode

let params = { foo: [5, 2] }

axios.get('path/to/api/',{params}) // URL : https://path/to/api?foo[]=5&foo[]=2

let myAxios = axios.create({
    paramsSerializer: params => Qs.stringify(params, {arrayFormat: 'repeat'})
})
myAxios.get('path/to/api/',{params}) // URL : https://path/to/api?foo=5&foo=2

Solution 3

Adding more details to @nhydock accepted answer. When you do

var request = {foo: [5, 2, 11] }

axios.get('http://example.com/', request);

For django application you can receive these as

self.request.query_params.getlist('foo')

also.

Comments

[Alex Pánek]

Sorry :( I've seen there's a paramSerializer in the process of building the URL, you might be able to tap in there and make it so it works with arrays too?

[Markus Meskanen]

Yeah I'm currently using query-string package's stringify() function, but I'm hoping to find a different way. Probably doesn't exist though

[Alex Pánek]

You could send a PR to axios fixing this though :)

[Jay Edwards]

The bad news is, this method causes colons to be escaped (not ideal for UTC time strings)

[slevin]

I used the query-string module which works similarly, but doesn't have a repeat option, but rather does this same behavior by default.

[Tasos K.]

To avoid encoding values, one can pass the parameters like this { encode: false, arrayFormat: 'repeat' }