usePrefetchInfiniteQuery

function usePrefetchInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): void;

정의 위치: preact-query/src/usePrefetchInfiniteQuery.tsx:51

usePrefetchInfiniteQuery는 아무것도 반환하지 않으며, 렌더링 중 프리페치를 실행하는 용도로만 사용해야 합니다, useSuspenseInfiniteQuery를 사용하는 컴포넌트를 감싸는 suspense boundary 앞에서 사용합니다. 전달할 수 있습니다 하지만 queryClient.infiniteQuery에 전달할 수 있는 모든 것을 usePrefetchInfiniteQuery에 전달합니다 queryKey, initialPageParam 및 getNextPageParam은 항상 필수이며, 다음 경우가 아니라면 queryFn도 필수입니다 기본 쿼리 함수가 정의되었습니다.

getNextPageParam은 무한 데이터 목록의 마지막 페이지와 모든 페이지의 전체 배열을 모두 받습니다, pageParam 정보도 함께 받고, 쿼리에 전달될 단일 변수를 반환해야 합니다 context.pageParam으로 작동하는 함수입니다. 사용 가능한 다음 페이지가 없음을 나타내려면 undefined 또는 null을 반환합니다.

쿼리에 이미 캐시된 상태가 하나라도 있으면 프리페치를 건너뜁니다. 여기에는 남아 있는 pending/error 상태도 포함됩니다 이전 시도에서 이어받으므로, 렌더링할 때마다 이를 호출해도 비용이 적으며 다음과 같은 데이터를 다시 가져오지 않습니다 이미 존재하거나 이미 진행 중입니다.

타입 매개변수

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

매개변수

옵션

UsePrefetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>

사용할 UsePrefetchInfiniteQueryOptions입니다 — queryClient.infiniteQuery에 전달할 수 있는 모든 항목입니다.

queryClient?

QueryClient

사용자 지정 QueryClient를 사용하려면 이를 사용합니다. 그렇지 않으면 가장 가까운 컨텍스트의 항목이 사용됩니다 사용됩니다.

반환값

void

void — 아무것도 반환되지 않습니다.

예시

import { Suspense } from 'preact/compat'
import { infiniteQueryOptions, usePrefetchInfiniteQuery } from '@tanstack/preact-query'

const projectsOptions = infiniteQueryOptions({
  queryKey: ['projects'],
  queryFn: ({ pageParam }) => fetchProjects(pageParam),
  initialPageParam: 0,
  getNextPageParam: (lastPage) => lastPage.nextId,
})

function App() {
  // Fire the prefetch during render, before the suspense boundary below.
  usePrefetchInfiniteQuery(projectsOptions)

  return (
    <Suspense fallback={<h1>Loading projects...</h1>}>
      <Projects />
    </Suspense>
  )
}