useInfiniteQuery

useInfiniteQuery

https://tanstack.com/query/latest/docs/framework/react/reference/useInfiniteQuery

공식 문서를 잘 보자.

🖥️ const {
  fetchNextPage,
  fetchPreviousPage,
  hasNextPage,
  hasPreviousPage,
  isFetchingNextPage,
  isFetchingPreviousPage,
  promise,
  ...result
} = useInfiniteQuery({
  queryKey,
  queryFn: ({ pageParam }) => fetchPage(pageParam),
  initialPageParam: 1,
  ...options,
  getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) =>
    lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) =>
    firstPage.prevCursor,
})

Options

기본적으로 useQurey훅과 동일한 옵션들을 가지고 있고, 아래 내용들이 추가된다.

• queryFn: (context: QueryFunctionContext) => Promise<TData>

  • 필수값, 단 defaultQueryFn이 정의되어 있지 않은 경우
  • 쿼리가 요청 데이터를 사용할 함수
  • QueryFunctionContext를 받는다.
  • 데이터를 resolve하거나 그렇지 않으면 에러를 발생시킬 프로미스를 반환

• initialPagePare: TPageParam

  • 필수값
  • 첫 페이지를 페칭할 때 사용할 디폴트 페이지 param

• getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam|undefined|null

  • 필수값
  • 이 쿼리로 새 데이터를 받으면, 이 함수는 무한 데이터 목록의 마지막 페이지와 모든 페이지의 전체 배열과 pageParam 정보를 받게 된다.
  • 하나의 variable을 반환하는데, 이는 queryFunction의 마지막 옵셔널 파라미터로 전달된다.
  • 다음 페이지가 없음을 나타내기 위해 undefined나 null을 반환

• getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) => TPageParam | undefined | null

  • 이 쿼리로 새 데이터를 받으면, 이 함수는 무한 데이터 목록의 마지막 페이지와 모든 페이지의 전체 배열과 pageParam 정보를 받게 된다.
  • 하나의 variable을 반환하는데, 이는 queryFunction의 마지막 옵셔널 파라미터로 전달된다.
  • 이전 페이지가 없음을 나타내기 위해 undefined나 null을 반환

• maxPages: number | undefined

  • 무한 쿼리 데이터에 저장할 페이지 최대값
  • 페이지 최대값에 도달하면, 새 페이지를 페칭할 시 지정된 로직에 따라 페이지 배열의 첫 페이지나 마지막 페이지를 제거하게 된다.
  • undefined이거나 0이면 페이지 수는 무한이다.
  • 기본값은 undefined
  • maxPages가 0보다 클 경우, getNextPageParam과 getPreviousPageParam을 제대로 정의해 필요시 양방향으로 페이지를 페칭할 수 있도록 해야 한다.

---

리턴값

useInfiniteQuery의 리턴값은 useQuery훅과 동일하고, 아래 내용이 추가되며 isRefetching과 isRefetchError에서 약간의 차이가 있다.

• data.pages: TData[]
• data.pageParams: unknown[]
• isFetchingNextPage: boolean
• isFetchingPreviousPage: boolean
• fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
• fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
• hasNextPage: boolean
• hasPreviousPage: boolean
• isFetchNextPageError: boolean
• isFetchPreviousPageError: boolean
• isRefetching: boolean
• isRefetchError: boolean
• promise: Promise<TData>