Axios 에서 쿼리 파라미터 제대로 쓰기

Axios 를 사용하다 보면, GET 형식에 params 를 사용할때가 종종 생긴다.

const params = { userIds:[1, 2] };
axios.get("http://api.com", {params});

// http://api.com?userIds=1,2
// http://api.com?userIds[]=1&userIds[]=2

이는 단순한 형태로는 잘 동작하지만, 아래와 같이 중첩되기 시작하는 순간 제대로 stringify 처리를 하지 못한다.

const params = { search:{keyword:"안녕"} };
axios.get("http://api.com", {params});

// http://api.com?search=[object+Object]

이를 해결해주기 위해서는 params 에 직접 한땀한땀 적어서 넣어주어야 할까? 아니다, 역시나 해결책은 이미 준비돼있다.

Axios 에는 paramsSerializer 라는 인터페이스를 열어주고 있다.
이곳에 내가 처리하고 싶은 방식으로 함수를 넘겨주면, 기본적으로 제공되는 serializer 대신 실행된다.

우리는 중첩된 오브젝트를 넣는게 목표이기 때문에, qs 라는 강력한 모듈을 사용해서 처리해줄 수 있다.

import qs from "qs";
axios.defaults.paramsSerializer = params => {
  return qs.stringify(params);
}

const params = { search:{keyword:"안녕"} };
axios.get("http://api.com", {params});

// http://api.com?search[keyword]=안녕

참고로 query-params 에서 배열, 오브젝트는 아래와 같은 컨벤션을 가지고 있다.

const arr = [1,2];
'http://api.com?arr=1,2'
'http://api.com?arr[]=1&arr[]=2'
'http://api.com?arr[0]=1&arr[1]=2'

const obj = {name: '123', age: 20};
'http://api.com?obj[name]=123&obj[age]=20'

const comb = {cat: ['고', '양', '이'], name: '이름'};
'http://api.com?comb[cat][]=고&comb[cat][]=양&comb[cat][]=이&comb[name]=이름'