usePrefetchQuery

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

定义于：packages/vue-query/src/usePrefetchQuery.ts:92

usePrefetchQuery 不返回任何值 — 它以响应式副作用的形式触发一次预取（prefetch），适用于在实际使用 useQuery 渲染数据的组件之前提前发起拉取。你可以向 usePrefetchQuery 传入所有能传给 queryClient.query 的参数，但 queryKey 始终是必需的，而 queryFn 仅在未定义默认查询函数时才必需。

若查询已存在任何缓存状态（包括此前尝试遗留的 pending/error 状态），则预取会被跳过；因此它不会重新拉取已存在的数据，也不会重复发起已在进行中的拉取。每当 options 中的响应式依赖（例如通过 queryOptions 构建）发生变化时，预取便会重新执行。

请在渲染期间、在包裹使用 useQuery 的 suspense() 的 Suspense 边界之前调用此函数 — 参见 Suspense 指南。

类型参数

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = TQueryFnData

TQueryData

TQueryData = TQueryFnData

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

参数

options

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

一个 ref、普通值或响应式 getter，其解析结果为要使用的 UsePrefetchQueryOptions — 即所有可传给 queryClient.query 的参数。

options 的属性

由 QueryExecuteOptions 构建。参见上方类型定义了解其影响。

queryClient?

QueryClient

使用此参数可指定自定义的 QueryClient；否则将使用 VueQueryPlugin 提供的 QueryClient。

返回值

void

示例

1<script setup lang="ts">2import { usePrefetchQuery } from '@tanstack/vue-query'3import Posts from './Posts.vue'45// Fire the prefetch as soon as this component runs, before `Posts` mounts and calls `useQuery`.6usePrefetchQuery({7  queryKey: ['posts'],8  queryFn: fetchPosts,9})10</script>11 12<template>13  <Posts />14</template>