지금 구현한 방식은 refetch를 호출하는 것이기 때문에, 페이지네이션을 위해 요청한 데이터를 모두 재요청합니다. 즉, 첫 번째 페이지만 요청하는 게 아니라 만약 사용자가 세 번째 페이지까지 요청한 상태라면 세 개의 요청을 다시 하는 것이죠.

이 방식은 구현하기 쉬운 대신 불필요한 요청도 많이 하는데, 이를 최적화할 수 있는 방법이 있습니다. useInfiniteQuery는 반대 방향으로도 페이지네이션할 수 있습니다. 이는 getPreviousPageParam을 옵션 설정하여 구현할 수 있습니다.

우선 해당 기능을 사용할 수 있도록 API도 조금 변경해주겠습니다.

api/articles.ts - getArticles

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

이 함수에 prevCursor라는 값을 넣어줬고, 이를 id_gt라는 쿼리 파라미터로 사용하도록 구현했습니다. 여기서 gt는 Greater than을 의미합니다.