TanStackQuery (10) - Infinite Queries

 

기존 데이터 집합에 더 많은 데이터를 추가적으로 로드하거나 무한 스크롤 할 수 있는 목록을 렌더링하는 것을 많이 봤을 것이다.

TanStackQuery는 이러한 유형의 목록을 쿼리하기 위해 useInfiniteQuery를 지원한다.

 

• data는 무한한 쿼리 데이터를 포함하는 객체이다
  • data.pages 배열은 가져온 페이지를 포함한다
  • data.pageParams는 페이지를 가져오는데 사용되는 페이지 매개변수를 포함하는 배열
• fetchNextPage 및 fetchPreviousPage 함수 사용 가능
• initialPageParam 옵션을 사용하여 초기 페이지 매개변수를 지정할 수 있다.
• getNextPageParam 및 getPreviousPageParam 옵션을 통해 로드할 페이지가 더 있는지 여부와 이를 패치할 정보가 있는지 여부를 확인할 수 있다.
• hasNextPage(boolean)사용할 수 있으며 이것은 getNextPageParam이 null 또는 undefined가 아닌 값을 반환할 때 true
• hasPreviousPage(boolean)사용할 수 있으며 getPreviousPageParm이 null 또는 undefined가 아닌 값을 반환할 때 true

 

Infinite Queries를 다시 가져와야 하는 경우

Infinite Queries가 오래되어 다시 패치해야할 때, 각 그룹은 첫번쨰 그룹부터 순차적으로 패치된다

이렇게 하면 기본 데이터가 변형되더라도 오래된 커서를 사용하지 않고 중복을 받거나 레코드를 건너뛰는 일이 발생하지 않는다.

무한 쿼리의 결과가 queryCache에서 제거되면 페이지 매김은 초기 그룹만 요청한 초기 상태에서 다시 시작한다.

 

양방향 무한 로딩을 구현하고 싶다면 ..

양방향 목록은 get{reviousPageParam, fetchPreviousPage, hasPreviousPage 및 isFetchingPreviouspage 속성과 함수를 사용하여 구현할 수 있다.

useInfiniteQuery({
	queryKey: ['projectes'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCurosr,
    getPriviousPageParam: (firstPage, pages) => firstPage.prevCurosr,
    })

 

페이지를 역순으로 표시하고 싶다면 ..

select 옵션을 활용한다

useInfiniteQuery({
	queryKey: ['projects'],
    queryFn: fetchProjects,
    select: (data) => ({
    	pages: [...data.pages].reverse(),
        pageParams: [...data.pageParams].reverse(),
    }),
 }

 

페이지 수를 제한하고 싶다면

일부 사용 사례에서 성능과 UX 개선을 위해 쿼리 데이터에 저장되는 페이지 수를 제한할 수 있다.

• 사용자가 많은 수의 페이지를 로드할 수 있는 경우(메모리 사용량)
• 수십 개의 페이지가 포함된 무한 쿼리를 다시 가져와야 하는 경우(네트워크 사용 : 모든 페이지가 순차적으로 패치됨)

해결책은 제한된 Infinite Queries를 사용하는 것이다.

maxPages 옵션을 getNextPageParam 및 getPreviousPageParam과 함께 사용하여 필요할 때 양방향으로 페이지를 패칭할 수 있도록 함으로써 가능하다.

 

useInfiniteQuery({
	queryKey: ['projectes'],
    queryFn: fetchProjects,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages) => lastPage.nextCurosr,
    getPreviousPageParam: (firstPage, pages) => FirstPage.prevCursor,
    maxPages: 3,
   })

 

 

API가 cursor를 반환하지 않는다면 어떻게 될까?

API가 cursor를 반환하지 않으면 pageParam을 cursor로 사용할 수 있다.

getNextPageParam과 getPreviousPageParam도 현재 페이지의 pageParam을 가져오기 때문에

다음/이전 페이지 매개변수를 계산하는데 사용할 수 있다.

 

return useInfiniteQuery({
  queryKey: ['projects'],
  queryFn: fetchProjects,
  initialPageParam: 0,
  getNextPageParam: (lastPage, allPages, lastPageParam) => {
    if (lastPage.length === 0) {
      return undefined
    }
    return lastPageParam + 1
  },
  getPreviousPageParam: (firstPage, allPages, firstPageParam) => {
    if (firstPageParam <= 1) {
      return undefined
    }
    return firstPageParam - 1
  },
})