axios 를 이용해서 우아하게 파라미터 넘기기

GET 메서드는 파라미터를 query string으로 넘깁니다

• 위 그림의 parameters는 query string 이라고도 부릅니다

데이터 조회 시 파라미터 넘기기

type FactoryParams = {
  size: number;
  page: number;
  companyId?: string;
  factoryName?: string;
  enabled?: boolean;
  sort?: string | string[];
}
export async function getFactories({
  companyId,
  factoryName,
  enabled,
  page,
  size,
  sort,
}: FactoryParams) {
  const queryParams = [];

  if (companyId !== '') {
    queryParams.push(`companyId=${companyId}`);
  }
  if (factoryName !== '') {
    queryParams.push(`factoryName=${factoryName}`);
  }
  if (enabled !== '') {
    queryParams.push(`enabled=${enabled}`);
  }
  if (sort && sort.length > 0) {
    if (Array.isArray(sort)) {
      const sortQueryString = sort.map((s) => `sort=${s}`).join('&');
      queryParams.push(sortQueryString);
    } else {
      queryParams.push(`sort=${sort}`);
    }
  }

  queryParams.push(`page=${page}`);
  queryParams.push(`size=${size}`);

  const queryString = queryParams.join('&');
  const url = `/api/factories?${queryString}`;

  return await axios.get<FactoryResult>(url).then((response) => response.data);
}

• 파라미터 중 일부는 옵셔널이지만 기본 값으로 빈 문자열('')을 사용하고 있습니다
• axios.get(url, { params: { ...파라미터 }}) 와 같이 axios get 메서드 옵션의 params 필드를 사용할 수 있지만
  기본값이 그대로 전달되는 경우 /api/factories?companyId=&factoryName= 와 같이 빈 문자열이 그대로 쿼리 스트링에 포함이 되었고 원치않는 응답이 전달되었습니다
• 따라서 위와 같이 쿼리 스트링을 직접 만들어서 조합하는 코드가 삽입되었습니다

빈 파라미터를 제거하고 우아하게 리팩터링하기

• PR을 올렸을 때 중첩된 if 문에 대한 수정요청이 있었습니다
• 그리고 빈 파라미터를 제거하는 유틸함수를 만들고 get 메서드 옵션 중 params 필드로 넘겨서 리팩터링을 해보았습니다

// 빈 파라미터를 제거하는 유틸함수
export const removeEmptyField = <T extends Record<string, unknown>>(obj: T) => {
  return Object.fromEntries(
    Object.entries(obj).filter(([, v]) => {
      if (v === null || v === undefined || v === '') {
        return false;
      }
      if (Array.isArray(v) && v.length === 0) {
        return false;
      }
      return true;
    }),
  ) as T;
};

export async function getFactories(params: FactoryParams) {
  return await axios
    .get<FactoryResult>('/api/factories', {
      params: removeEmptyField(params),
      paramsSerializer: {
        indexes: null,
      },
    })
    .then((response) => response.data);

• 위와 같이 params를 removeEmptyField함수로 감싸면 if 문을 사용하지 않고 빈문자열 필드 없이 파라미터를 넘길 수 있습니다
• sort 파라미터의 경우 string[] 과 같이 배열으로 전달될 수 있는데 이 때 paramsSerializer 필드에 위와 같이 indexes: null을 전달해야 올바르게 쿼리스트링이 만들어집니다