본문으로 건너뛰기

useInfiniteQuery

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

옵션

useInfiniteQuery의 옵션은 다음 항목이 추가된다는 점을 제외하면 useQuery 훅과 동일합니다:

  • queryFn: (context: QueryFunctionContext) => Promise<TData>
    • 필수이지만, 기본 쿼리 함수가 정의되지 않은 경우에만 해당합니다 defaultQueryFn
    • 쿼리가 데이터를 요청하는 데 사용할 함수입니다.
    • QueryFunctionContext를 받습니다
    • 데이터를 이행하거나 오류를 발생시키는 Promise를 반환해야 합니다.
  • initialPageParam: TPageParam
    • Required
    • 첫 페이지를 가져올 때 사용할 기본 페이지 매개변수입니다.
  • getNextPageParam: (lastPage, allPages, lastPageParam, allPageParams) => TPageParam | undefined | null
    • Required
    • 이 쿼리에 대한 새 데이터가 수신되면 이 함수는 무한 데이터 목록의 마지막 페이지와 모든 페이지의 전체 배열뿐만 아니라 pageParam 정보도 받습니다.
    • 쿼리 함수의 마지막 선택적 매개변수로 전달될 단일 변수를 반환해야 합니다.
    • 사용 가능한 다음 페이지가 없음을 나타내려면 undefined 또는 null을 반환합니다.
  • getPreviousPageParam: (firstPage, allPages, firstPageParam, allPageParams) => TPageParam | undefined | null
    • 이 쿼리의 새 데이터가 수신되면 이 함수는 무한 데이터 목록의 첫 페이지와 모든 페이지의 전체 배열뿐만 아니라 pageParam 정보도 받습니다.
    • 쿼리 함수의 마지막 선택적 매개변수로 전달될 단일 변수를 반환해야 합니다.
    • 사용 가능한 이전 페이지가 없음을 나타내려면 undefined 또는 null을 반환하세요.
  • maxPages: number | undefined
    • 무한 쿼리 데이터에 저장할 최대 페이지 수입니다.
    • 최대 페이지 수에 도달한 상태에서 새 페이지를 가져오면 지정된 방향에 따라 pages 배열에서 첫 번째 또는 마지막 페이지가 제거됩니다.
    • undefined이거나 0과 같으면 페이지 수에 제한이 없습니다
    • 기본값은 undefined입니다
    • 필요할 때 양방향으로 페이지를 가져올 수 있도록 maxPages 값이 0보다 크면 getNextPageParam 및 getPreviousPageParam을 올바르게 정의해야 합니다.

반환값

useInfiniteQuery의 반환 속성은 useQuery 훅과 동일하며, 다음 속성이 추가되고 isRefetching과 isRefetchError에 약간의 차이가 있습니다:

  • data.pages: TData[]
    • 모든 페이지를 포함하는 배열입니다.
  • data.pageParams: unknown[]
    • 모든 페이지 매개변수를 포함하는 배열입니다.
  • isFetchingNextPage: boolean
    • fetchNextPage를 사용하여 다음 페이지를 가져오는 동안에는 true입니다.
  • isFetchingPreviousPage: boolean
    • fetchPreviousPage를 사용하여 이전 페이지를 가져오는 동안 true가 됩니다.
  • fetchNextPage: (options?: FetchNextPageOptions) => Promise<UseInfiniteQueryResult>
    • 이 함수를 사용하면 결과의 다음 "페이지"를 가져올 수 있습니다.
    • options.cancelRefetch: boolean을 true로 설정하면, 이전 항목의 상태와 관계없이 fetchNextPage를 반복해서 호출할 때마다 queryFn이 호출됩니다 호출이 이행되었는지 여부입니다. 또한 이전 호출의 결과는 무시됩니다. false로 설정하면 fetchNextPage 호출 시 반복 호출해도 첫 번째 호출이 이행될 때까지 아무런 효과가 없습니다. 기본값은 true입니다.
  • fetchPreviousPage: (options?: FetchPreviousPageOptions) => Promise<UseInfiniteQueryResult>
    • 이 함수를 사용하면 결과의 이전 "페이지"를 가져올 수 있습니다.
    • fetchNextPage와 마찬가지로 options.cancelRefetch: boolean을 사용합니다.
  • hasNextPage: boolean
    • 가져올 다음 페이지가 있으면(getNextPageParam 옵션을 통해 확인) true가 됩니다.
  • hasPreviousPage: boolean
    • 가져올 이전 페이지가 있으면(getPreviousPageParam 옵션을 통해 파악됨) true가 됩니다.
  • isFetchNextPageError: boolean
    • 다음 페이지를 가져오는 동안 쿼리가 실패하면 true가 됩니다.
  • isFetchPreviousPageError: boolean
    • 이전 페이지를 가져오는 동안 쿼리가 실패하면 true가 됩니다.
  • isRefetching: boolean
    • 백그라운드 다시 가져오기가 진행 중일 때마다 true가 되며, 여기에는 초기 pending 또는 다음이나 이전 페이지 가져오기가 포함되지 않습니다
    • isFetching && !isPending && !isFetchingNextPage && !isFetchingPreviousPage와 동일합니다
  • isRefetchError: boolean
    • 페이지를 다시 가져오는 동안 쿼리가 실패하면 true가 됩니다. fetchNextPage 같은 명령형 가져오기 호출은 기본 다시 가져오기 동작을 방해하여 오래된 데이터가 생성될 수 있다는 점에 유의하세요. 이러한 함수는 사용자 작업에 대한 응답으로만 호출하거나 hasNextPage && !isFetching 같은 조건을 추가해야 합니다.