15.10.1 게시글 목록 조회 API 함수 변경하기

이전에 선언한 getArticles를 페이지네이션할 수 있도록 수정해줍시다.

api/articles.ts - getArticles

export async function getArticles({
  limit = 10,
  cursor,
}: {
  limit?: number;
  cursor?: number;
}) {
  const response = await client.get<Article[]>('/articles', {
    params: {
      _sort: 'id:DESC',
      _limit: limit,
      id_lt: cursor,
    },
  });
  return response.data;
}

axios를 사용할 때 쿼리 파라미터를 사용하는 경우 주소 부분에 다음과 같은 형식으로 바로 쿼리 파라미터를 넣을 수도 있습니다.

client.get<Article[]>(`/articles?_sort=id:DESC&_limit=${limit}&id_lt=${cursor ?? ''});

하지만 템플릿 리터럴 문법을 사용하는 것보다 객체 형식으로 설정하는 것이 더욱 명료하기 때문에 params를 옵션에 넣는 방식으로 구현해줬습니다.

이 함수에서는 limit의 기본값을 10으로 사용합니다. 따라서 추후 API를 사용할 때 따로 명시하지 않으면 10개씩 불러오게 됩니다.