axios: Invalid `paramsSerializer` TS type

@RNR1 Axios already supports this out of the box. By default, Axios encodes arrays in “bracket” format but supports 3 qs formats except “comma”.

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) ==> config.paramsSerializer.indexes = true // 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) ==> config.paramsSerializer.indexes = false// 'a[]=b&a[]=c' // **Default**
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) ==> config.paramsSerializer.indexes = null// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' }) ==> **not supported** // 'a=b,c'

So to encode in arrayFormat: 'repeat' you need to do the following:

  const {data} = await axios.get('https://postman-echo.com/get', {
    params: {
      a: ['b', 'c', 'd']
    },
    paramsSerializer: {
      indexes: null // by default: false
    }
  });

Echo response:

{
  args: { a: [ 'b', 'c', 'd' ] },
  headers: {
    'x-forwarded-proto': 'https',
    'x-forwarded-port': '443',
    host: 'postman-echo.com',
    'x-amzn-trace-id': 'Root=1-63409c06-5d9fc0344ceaf9715466e0e3',
    accept: 'application/json, text/plain, */*',
    'user-agent': 'axios/1.1.0',
    'accept-encoding': 'gzip, deflate, br'
  },
  url: 'https://postman-echo.com/get?a=b&a=c&a=d' 
}

Undocumented API change. Not cool.

@pegiadise Just had same issue now, I found the encode option in paramsSerializer.

To fix the error you need to do next:

config.paramsSerializer = {
  encode: (params) => qs.stringify(params, { arrayFormat: 'repeat' })
}

Shouldn’t it be:

  paramsSerializer: {
      serialize: (params) => {
          return qs.stringify(params, { arrayFormat: 'repeat' })
      }
  }

?

@DigitalBrainJS

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) ==> config.paramsSerializer.indexes = true // 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) ==> config.paramsSerializer.indexes = false// 'a[]=b&a[]=c' // **Default**
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) ==> config.paramsSerializer.indexes = null// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' }) ==> **not supported** // 'a=b,c'

is really helpful, it should be added to the official documentation

how do i fix this in my case? @babazookz @alete89 @dduft

const axiosClient = axios.create({
  baseURL: baseUrl,
  paramsSerializer: (params) => queryString.stringify({ params }),  // Error is coming from this line
});

error message: Type ‘(params: any) => string’ has no properties in common with type ‘ParamsSerializerOptions’

 paramsSerializer: {
      serialize: (params) => {
          return queryString.stringify({ params })
      }
  }

how do i fix this in my case? @babazookz @alete89 @dduft

const axiosClient = axios.create({
  baseURL: baseUrl,
  paramsSerializer: (params) => queryString.stringify({ params }),  // Error is coming from this line
});

error message: Type ‘(params: any) => string’ has no properties in common with type ‘ParamsSerializerOptions’

Yes, the paramsSerializer option now has a totally different interface/implementation. The encode option is primarily for custom data escaping. The custom key/value pair encoder is not currently supported for query params (only supported for FormData pairs), although it is defined as a visitor method in the TS interface, it is currently ignored. Its support will be added soon. Basically, Axios has its own encoder that handles common cases of encoding nested data structures, so most users won’t encounter the need for custom parameter conversions.