openapi-client-axios icon indicating copy to clipboard operation
openapi-client-axios copied to clipboard

array in parameters is converted to string.

Open Matthijs-Brouwer opened this issue 2 years ago • 3 comments

Hi All,

When I add an array to any of my requests it is converted to a string. In version 4.6.1 I did not have this problem.

async function getPets() { const client = await api.getClient(); const res = await client.createPet({ names: ['Garfield', 'Pluto', 'Scooby-Doo'] });

I would expect the request to be something like this: api/pets/get?names=Garfield&names=Pluto&names=Scooby-Doo

But what I get is: api/pets/get?references=Garfield%2CPluto%2CScooby-Doo

Kind regards,

Matthijs

Matthijs-Brouwer avatar Jun 09 '22 15:06 Matthijs-Brouwer

Hi @Matthijs-Brouwer ! This is the default way URLSearchParams serializes array parameters in the query string. Since openapi-client-axios@>5 I switched to URLSearchParams instead of the 3rd party query-string package. (Hence the major breaking change)

https://github.com/anttiviljami/openapi-client-axios/commit/3c6e179f4080a13c0beff3eba69dac1ec441c761#diff-10afb20f65e382532811fb286ac8c740870cb5e2e124cb9f801c8384ffc9c451L6

However, this behaviour should definitely be configurable. Would be a nice improvement. 👍

PRs welcome! Otherwise, you can downgrade to openapi-client-axios@^4 for the old behaviour

anttiviljami avatar Jun 10 '22 13:06 anttiviljami

Hi @anttiviljami,

Thanks for your explanation. What do you suggest? Should I add axiosConfigDefaults for create/append/toString query params?

kind regards,

Matthijs

Matthijs-Brouwer avatar Jun 13 '22 10:06 Matthijs-Brouwer

Hi @anttiviljami,

I Could try to make the behaviour configurable as you said. But it seems that it would also require a modification to the AxiosRequestConfig interface which i'm not a fan of. Do you see any other options to make these functions configurable?

      axiosConfigDefaults: {
        paramsSerializer: (params) => new URLSearchParams(params).toString(),
		newQueryParams: new URLSearchParams(),
		appendQueryParams: (queryParams: any, name: any, value: any) => {
			if (Array.isArray(value)) {
				for (const valueItem of value) {
					queryParams.append(name, valueItem);
				}
			  } else {
				queryParams.append(name, value);
			  }
			  return queryParams;
		},
		stringifyQueryParams: (queryParams: any) => queryParams.toString(), 
        ...(opts.axiosConfigDefaults || {}),
      } as AxiosRequestConfig,

Kind regards,

Matthijs

Matthijs-Brouwer avatar Aug 24 '22 12:08 Matthijs-Brouwer

Thank you, @anttiviljami, for the library and maintenance. It saves a lot of time and provides a really high value in terms of contract driven-development.

I have faced the same problem with array serialization in my code. However, the workaround was a bit different. I have used the qs library, which does query params serialization. Here is a link: https://www.npmjs.com/package/qs

I hope this piece of code will help people to overcome this issue:

import * as qs from 'qs';

        axiosConfigDefaults: {
            paramsSerializer: { serialize: p => qs.stringify(p) },
        },

My versions are:

"axios": "^1.3.2",
"openapi-client-axios": "^7.1.1",
"qs": "^6.11.0",

AndriiZelenskyi avatar Feb 14 '23 14:02 AndriiZelenskyi

Hi,

This issue can be closed since it's already resloved in this issue: https://github.com/anttiviljami/openapi-client-axios/issues/111

EvertTheman avatar Feb 15 '23 09:02 EvertTheman

Thanks @EvertTheman ! 🙏

anttiviljami avatar Feb 15 '23 09:02 anttiviljami