useInfiniteQuery 사용법

유저의 스크롤 이벤트에 따라 데이터를 추가로 로딩하는 infinite scroll 기능 구현중,
지금 사용하고 있는 react-query에서 데이터 무한 로딩을 위한 useInifiniteQuery 기능을 사용하게 되어 참고로 남겨둡니다!

Infinite Queries

React-query에서는 useQuery의 무한 스크롤 버전인 useInfiniteQuery를 제공합니다. 이를 통해 추가로 데이터를 로딩하고 리스트로 관리할 수 있습니다.

const { data } = useInfiniteQuery(queryKey, fetcher, options)

useInfiniteQuery의 파라미터 중 queryKey(데이터 식별 쿼리 키), fetcher(쿼리 함수) 부분은 useQuery와 동일하기 때문에 넘어가고, 옵션들에 대해서만 추가로 설명합니다.

options

getNextPageParam : (lastData, allData) => unknown | undefined

• react-query 공식 문서에서는 'lastPage, allPages'로 써있어서 좀 헷갈렸는데, 현재 받아온 데이터와 현재 쌓여있는 전체 데이터를 의미한다고 보면 될 것 같음
• 다음 API 호출에서 쿼리 함수에 넘어갈 페이지 파라미터를 리턴해주는 역할
• 만약 response에서 페이지 정보를 받아올 수 있다면 해당 값을 사용하고, 아니라면 로직상 보관하고 있는 page param의 + 1 하면 될것 같음

getPreviousPageParam : (firstData, allData) => unknown | undefined

• firstData는 첫번째 페치로 받아온 데이터, allData는 현재 쌓여있는 전체 데이터를 의미한다.
• 현재 요구사항에서는 사용 X 것 같음

리턴 데이터

• data -> [pages, pageParams] 가 담김
• data.pages : 방금 받아온 데이터를 포함해서 모든 데이터를 리스트로 리턴함
• data.pageParams : 호출한 페이지 파라미터들을 리스트로 리턴함 (여기에서 가져오는 페이지 파라미터는 getNextPageParam에서 리턴한 값을 사용함, 첫 값은 undefined 들어감)
• isFetchingNextPage : fetchNextPage를 통해 페칭이 되고 있는 상태인지 여부
• fetchNextPage : 다음 페이지를 호출하는 함수.
• 옵션에는 pageParam, cancelRefetch가 들어감
• pageParams을 직접 지정해줄 경우에는 자동으로 사용하던 값(getNextPageParam 리턴값)을 안쓰게 됨
• cancelRefetch가 true 이면 fetchPage를 계속 호출 (기본값??)
• hasNextPage : getNextPageParam의 리턴값을 통해 다음 페이지가 있는지를 판단함