axios GET array params [] 없이 날리기 (axios paramsSerializer 세팅), nullish data 인 경우 날리지 않기(null, undefined 처리)

[AS-IS]

GET 요청에 params로 array 를 보냈더니 이렇게 갔다

 

Network payload 탭

 

Request URL

http://myapi.com/order?status[]=Confirmed&status[]=ReqShipping&status[]=Allocation&status[]=Packed

 

 

[TO-BE]

API 서버에서 원하는 형식은 다음과 같다

http://myapi.com/order?status=Confirmed&status=ReqShipping&status=Allocation&status=Packed

 

 

[TO-DO]

1. qs 라이브러리 설치

query string 관련 형식 맞추기 편리하게 함수 제공하는 라이브러리임

https://www.npmjs.com/package/qs

npm i qs

2. axios paramSerializer 세팅

특정 API 하나만 params 세팅이 필요하면, 특정 API 함수에만 옵션값 세팅하면된다.

axiosInstance 를 만들어서 사용 중이라서 default로 세팅했다

const axiosInstance = axios.create({
	baseURL: process.env.REACT_APP_API_URL,
	headers: {
		'Content-Type': 'application/json',
	},
	paramsSerializer: function (params) {
		return qs.stringify(params, { arrayFormat: 'repeat' });
	},
});

qs 라이브러리에서 제공하는 옵션으로 원하는 형식을 맞추면 된다

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })
// 'a=b&a=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'

 

 

param 이 null 이나 undefined 인 경우 paramsSerializer 를 세팅하기 전에는 자동으로 데이터를 안보냈지만,

paramsSerializer 를 세팅하면서, null 이나 undefined 인 경우 빈값으로 데이터가 날아감

이를 방지하기 위해 paramsSerializer 에서 null 이나 undefined 인 경우 걸러주는 작업을 추가함

paramsSerializer: function (params) {
		// Filter out null or undefined values from the params object
		const filteredParams = Object.keys(params)
			.filter((key) => params[key] !== null && params[key] !== undefined)
			.reduce((filtered, key) => {
				filtered[key] = params[key];
				return filtered;
			}, {});

		return qs.stringify(filteredParams, { arrayFormat: 'repeat' });
	},