React Query가 말아주는 무한스크롤!

react-query 에서는 무한스크롤 구현을 편하고 직관적으로 구현하게 도와주는

useInfiniteQuery 훅이 있다.

useInfiniteQuery 사용법

let {
    data,
    isFetching,
    fetchNextPage,
    hasNextPage,
    // isFetchingNextPage,
    status,
} = useInfiniteQuery({
    queryKey: ["games", {sort: sortState}],
    queryFn: async ({pageParam}) => await findAllGame({pageParam, sort: sortState}),
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages, lastPageParam) => {
        if (lastPage.length === 0) return undefined;
        return lastPageParam + 1;
    },
    staleTime : 1000 * 5
    enable: false
})

반환값 설명

1. data

   페이지 데이터가 들어있다.

   {pages, pageParams} 으로 언패킹 가능하며

   • pages 에서는 우리가 원래 넘겨 받는 데이터가 존재하고
   • pageParams에는 생긴 반환받은 페이지 번호 배열이 들어있다. // [0,1,2,3 … ]

2. isFetching : 생략

3. fetchNextPage

   다음 페이지 데이터를 가져오는 함수이다.

   queryFn 옵션과 getNextPageParam 옵션을 사용하는 함수로 이 두가지 옵션을 잘 적어야 정상작동한다.

4. hasNextPage

   다음 페이지가 있는지 확인하는 불리언 상태 변수로 getNextPageParam 의 반환값이 undefined 라면 false 로 바뀐다.

5. status

   error 상태와

   success 상태가 있다.

옵션 설명

1. queryKey

   데이터 캐싱에 사용될 키값이다. 본인은 정렬 순서도 키값에 포함 시켰다.

2. queryFn

   데이터 페칭 함수로 콜백함수를 넣는다.

   이 콜백함수는 인자로 QueryFunctionContext 라는 객체를 반환하는데 안에는

   • pageParam (가져온 데이터의 페이지 번호)
   • 등…

   의 데이터가 담겨있다. (자세한건 공식문서 ㄱㄱ)

3. initialPageParam

   페이지 번호의 초깃값을 설정한다.

4. getNextPageParam

   다음 페이지 번호를 가져오는 로직의 콜백함수를 적는다.

   콜백함수의 인자는

   • lastPage : 맨마지막으로 가져온 페이지 데이터
   • allPages : 모든 페이지 데이터
   • lastPageParam : 마지막 페이지 번호

   를 인자로 준다.

   본인의 경우 마지막으로 가져온 페이지 데이터의 배열 길이가 0이라면 undefined를 리턴하여 hasNextPage 를 false 만들어 주었다.

5. enable

   마운트시 실행을 할지 말지 정하는 옵션이다

   본인의 경우 IntersectionObserver API 를 사용했기에 false로 설정했다.

   https://velog.io/@twoone14/React-무한스크롤

6. staleTime : 캐싱 옵션으로 자세한건 useQuery, useMutate 등에서도 확인가능하다.

7. gcTime : 위와 같은 이유로 생략

개같이 잘된다.

참고자료
Infinite Queries | TanStack Query React Docs