무한 스크롤을 구현하기 위한 useInfiniteQuery

심화 프로젝트를 진행하면서 item list를 무한 스크롤을 사용하여 데이터를 끊어 오기로했다.
마침 react-query를 사용하고 있었고, react-query에는 무한스크롤을 구현하기 편한 hook을 제공한다.
그 hook은 useInfiniteQuery이다.

useInfiniteQuery는 기존 데이터에 추가로 데이터를 호출해서 더해줄 수 있는 hook이다.

  const {
    data,
    error,
    fetchNextPage,
    hasNextPage,
    isFetching,
    isFetchingNextPage,
    status,
  } = useInfiniteQuery({
    queryKey: ['projects'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCursor,
  })

useInfiniteQuery 리턴 값

1. data: 쿼리에 의해 반환된 데이터를 포함한다. infinity query의 경우, data.pages 배열에 각 페이지의 데이터가 저장된다. 각 페이지는 queryFn에 의해 반환된 데이터 형식을 따른다.

2. error: 쿼리 실행 중 발생한 에러를 나타낸다. 쿼리가 실패하면 이 값은 에러 객체를 포함하게 된다.

3. fetchNextPage: 다음 페이지의 데이터를 가져오기 위한 함수이다. 이 함수를 호출하면 useInfiniteQuery가 getNextPageParam을 사용하여 다음 페이지의 데이터를 요청한다.

4. hasNextPage: 더 이상 가져올 페이지가 있는지 여부를 나타낸다.
   getNextPageParam에서 undefined 또는 false를 반환하면 hasNextPage는 false가 된다.

5. isFetching: 쿼리가 현재 데이터를 가져오고 있는지 여부를 나타낸다. 초기 데이터 로드 또는 추가 페이지 로드 중일 때 true가 된다.

6. isFetchingNextPage: 현재 다음 페이지의 데이터를 가져오고 있는지 여부를 나타낸다. fetchNextPage 함수가 호출되어 다음 페이지를 로드 중일 때 true가 된다.

7. status: 쿼리의 현재 상태를 나타낸다. 가능한 값으로는 'pending', 'error', 'success'가 있다. 데이터 로딩 중이면 'pending', 에러가 발생하면 'error', 데이터 로딩이 성공적으로 완료되면 'success'가 된다.

useInfiniteQuery options

1. queryKey: 쿼리의 고유 식별자이다. 이 키는 캐싱, 업데이트, 재사용 등을 관리하기 위해 사용된다. 쿼리 키는 문자열 또는 객체의 배열이 될 수 있다.

2. queryFn: 페이지 데이터를 불러오는 함수이다. 이 함수는 페이지의 데이터를 가져오고, 필요에 따라 서버에 요청을 보내는 로직을 포함한다.

3. initialPageParam: 초기 페이지 매개변수이다. 처음 쿼리를 실행할 때 사용되는 페이지 매개변수를 설정한다.

4. getNextPageParam: 다음 페이지를 가져오기 위한 매개변수를 반환하는 함수이다. 이 함수는 마지막으로 불러온 페이지의 데이터와 모든 페이지의 배열을 인자로 받아 다음 페이지의 매개변수를 결정한다.

5. getPreviousPageParam: 이전 페이지를 가져오기 위한 매개변수를 반환하는 함수이다. getNextPageParam과 유사하게, 이전 페이지 로딩 시 사용된다.

6. enabled: 쿼리의 자동 실행 여부를 설정한다. false로 설정하면 쿼리가 자동으로 실행되지 않으며, 수동으로 트리거해야 한다.

7. select: 쿼리 결과에서 특정 데이터를 선택하거나 변형하기 위한 함수이다. 이 함수는 쿼리 결과 전체를 인자로 받고, 변형된 결과를 반환한다.

8. keepPreviousData: 새 페이지 데이터를 불러오는 동안 이전 페이지의 데이터를 유지할지 여부를 설정한다. 페이지네이션 시 이전 페이지를 유지하려면 이 옵션을 true로 설정한다.

9. staleTime: 쿼리 데이터가 오래되었다고 간주되기 전의 시간을 밀리초 단위로 설정한다. 이 시간 동안 쿼리 데이터는 "fresh"로 간주된다.

10. cacheTime: 비활성화된 쿼리 데이터가 캐시에 남아있는 시간을 밀리초 단위로 설정한다. 이 시간이 지나면 캐시에서 데이터가 제거된다.

11. refetchOnWindowFocus: 윈도우 포커스가 변경될 때 쿼리를 다시 가져올지 여부를 설정한다. 일반적으로 앱이 백그라운드에서 포어그라운드로 전환될 때 유용한다.

12. refetchOnReconnect: 네트워크 연결이 재개될 때 쿼리를 다시 가져올지 여부를 설정한다.

13. retry: 쿼리 실패 시 재시도할 횟수를 설정한다.

14. onSuccess, onError, onSettled: 쿼리 실행의 성공, 실패, 마무리 시 호출될 콜백 함수이다.