usePrefetchQuery

1function usePrefetchQuery<TQueryFnData = unknown, TError = Error, TData = TQueryFnData, TQueryData = TQueryFnData, TQueryKey extends readonly unknown[] = readonly unknown[]>(options: UsePrefetchQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>, queryClient?: QueryClient): void;

定义位置：packages/preact-query/src/usePrefetchQuery.tsx:39

usePrefetchQuery 不返回任何值，应仅在渲染期间调用，以在包裹使用 useSuspenseQuery 的组件的 Suspense 边界之前触发预取。你可以向 usePrefetchQuery 传入所有能传给 queryClient.query 的参数，但 queryKey 始终是必需的，而 queryFn 仅在未定义默认查询函数时才必需。

如果查询已存在任何缓存状态（包括此前尝试遗留的 pending/error 状态），则预取会被跳过，因此每次渲染都调用此函数开销很低，不会对已存在或已在进行中的数据重新拉取。

类型参数

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryData

TQueryData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

参数

options

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

要使用的 UsePrefetchQueryOptions —— 即所有可传给 queryClient.query 的参数。

options 属性

基于 QueryExecuteOptions 构建。参见上方类型定义以了解其变更内容。

queryClient?

QueryClient

使用此参数可指定自定义 QueryClient；否则将使用离当前作用域最近的上下文中的 QueryClient。

返回值

void

示例

1import { Suspense } from 'preact/compat'2import { usePrefetchQuery } from '@tanstack/preact-query'3 4function App() {5  // Fire the prefetch during render, before the suspense boundary below.6  usePrefetchQuery({7    queryKey: ['posts'],8    queryFn: fetchPosts,9  })10 11  return (12    <Suspense fallback={<h1>Loading posts...</h1>}>13      <Posts />14    </Suspense>15  )16}