useInfiniteQuery
공식문서
공식문서에 따르면 해당 hook은 useQuery의 확장이다
파라미터 값을 변경하며 무한히 useQuery를 호출하게 된다.
따라서, 일반적인 사용 예시는 무한 스크롤(infinite scroll)이 있을 것이다.
여기서 무한 스크롤은 크게 두가지로 구분하여 사용할 수 있다.
offset
limit, offset 쿼리 사용.
offset만큼 뛰어넘어 limit만큼의 갯수를 가져옴.
넘버로 페이지가 나눠진 페이지네이션을 구현할 때 사용한다.
cursor
특정 id(cursor)로부터 다음 n개를 가져옴.
무한스크롤 또는 더보기 기능을 구현할 때 사용한다.
options
option들에는 useQuery에서도 사용되었던 queryFn, select, onSuccess등이 있다.
추가로 getNextPageParam, getPreviousPageParam이 있는데 이는 요청할 페이지의 pageParam을 정한다.
즉 다음 페이지를 불러올 pageParam을 return해야한다.
returns
data, 페칭 상태, 다음 페이지 여부 등 여러 값들을 받아볼 수 있다.
- data
data.page, data.pageParams 로 이루어진 객체이다. - fetchNextPage
pageParam에 따른 다음 페이지를 불러온다. - hasNextPage
다음 페이지가 있는지 위의getNextPageParam를 통해 알아온다. - isFetchingNextPage
페이지가 페칭중인지 알아온다.
...
위와 같은 값들로 상호작용하여 데이터를 받아오고, 더 데이터를 받오고싶다면 가능 여부를 판단하여 다음 데이터를 받아오며 데이터를 받는 중인지까지 확인할 수 있다.
참고
개발의 흔적을 남기고 쌓아가기 위한 일기장