더북(TheBook)

이 코드의 getNextPageParam에서는 { cursor: number } 타입의 객체를 반환하고, getPreviousPageParam에서는 { prevCursor: number } 타입의 객체를 반환합니다.

getPreviousPageParam에서는 첫 번째 항목의 idprevCursor로 사용하는데, 이때 비어있지 않은 첫 번째 배열을 선택하는 작업을 선행해줬습니다. 이렇게 한 이유는 만약 새로고침했는데 새 글이 작성되지 않은 경우 pages에 빈 배열이 맨 앞에 붙게 되고, 맨 앞 배열이 빈 배열이면 getPreviousPageParam의 반환값이 무조건 undefined가 되기 때문입니다.

문제가 발생하는 코드는 다음과 같습니다. 만약 최신 데이터를 불러오는 게 아니라면 다음과 같은 방식이 적합하겠지만, 우리는 반대 방향으로 페이지네이션할 때 데이터가 있을 수도 있고 없을 수도 있는 상황이기 때문에 현재 상황에는 적합하지 않습니다.

getPreviousPageParam: (firstPage) =>
firstPage[0]?.id ? {prevCursor: firstPage[0].id} : undefined,
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.