usePrefetchQuery

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

정의 위치: preact-query/src/usePrefetchQuery.tsx:42

usePrefetchQuery는 아무것도 반환하지 않으며, 렌더링 중에 다음보다 먼저 프리페치를 실행하는 용도로만 사용해야 합니다 useSuspenseQuery를 사용하는 컴포넌트를 감싸는 suspense boundary입니다. 모든 항목을 다음에 전달할 수 있습니다 queryClient.query에 전달할 수 있는 usePrefetchQuery이지만, queryKey는 항상 필수이며, 기본 쿼리 함수가 정의되어 있지 않으면 queryFn이 필수입니다.

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

타입 매개변수

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryData

TQueryData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

매개변수

옵션

UsePrefetchQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>

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

queryClient?

QueryClient

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

반환값

void

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

예시

import { Suspense } from 'preact/compat'
import { usePrefetchQuery } from '@tanstack/preact-query'

function App() {
  // Fire the prefetch during render, before the suspense boundary below.
  usePrefetchQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  })

  return (
    <Suspense fallback={<h1>Loading posts...</h1>}>
      <Posts />
    </Suspense>
  )
}