TIL 72. Next.js - useInfiniteQuery

프로젝트에 무한 스크롤을 구현하기 위해 infiniteQuery에 대해 알아보았다.

infiniteQuery

 const {
   data, 					// data.pages를 갖고 있는 배열
   error, 					// error 객체
   fetchNextPage, 			// 다음 페이지를 불러오는 함수
   fetchPreviousPage,		// 이전 페이지를 불러오는 함수
   hasNextPage, 			// 다음 페이지가 있는지 여부, Boolean
   hasPreviousPage,			// 이전 페이지 여부, Boolean
   isFetchingNextPage,		// 추가 페이지 fetching 여부, Boolean
   isFetchingPreviousPage,	// 이전 페이지 fetching 여부, Boolean
   status, 					// loading, error, success 중 하나의 상태, string
   ...result
 } = useInfiniteQuery(queryKey, ({ pageParam = 1 }) => fetchPage(pageParam), {
   ...options,
   getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
   getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
 })

위 코드는 공식문서에 나와있는 코드에 내 입맛을 추가한 코드다.

공식문서의 설명은 살짝 불친절한 감이 있어서 실제 코드를 보면서 알아보자.

const {
    data, 
    fetchNextPage, 
    status, 
  } = useInfiniteQuery(
    'infiniteData', 
    getData,
    {
      getNextPageParam: () => {
        return true;
      },
    }
  );

내가 가져올 데이터는 페이지 파라미터가 없다. 그래서 리턴값으로 true를 주었다.
물론 getNextPageParam부분이 없으면 다음페이지를 가져오지 않는다.

useBottomScrollListener(() => {
    fetchNextPage();
  });

useBottomScrollListener라는 라이브러리를 사용해서 스크롤이 바닥에 닿을 때 fetchNextPage()함수를 실행시킨다.
fetchNextPage()함수는 useInfiniteQuery의 다음페이지를 불러오는 함수다.