usePrefetchInfiniteQuery

1function usePrefetchInfiniteQuery<TQueryFnData = unknown, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: MaybeRefOrGetter<MaybeRefDeep<UsePrefetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>>, queryClient?: QueryClient): void;

定义于：packages/vue-query/src/usePrefetchInfiniteQuery.ts:100

usePrefetchInfiniteQuery 不返回任何值 — 它以响应式副作用的形式触发一次预取（prefetch），适用于在实际使用 useInfiniteQuery 渲染数据的组件之前提前发起拉取。你可以向 usePrefetchInfiniteQuery 传入所有能传给 queryClient.infiniteQuery 的参数，但 queryKey、initialPageParam 和 getNextPageParam 始终为必填项；除非已定义默认查询函数，否则 queryFn 也为必填项。

getNextPageParam 接收无限数据列表的最后一页、全部页面组成的完整数组，以及 pageParam 信息，并应返回一个单一变量，该变量将作为 context.pageParam 传入你的查询函数。返回 undefined 或 null 表示当前无下一页可用。

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

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

类型参数

TQueryFnData

TQueryFnData = unknown

TError

TError = Error

TData

TData = InfiniteData<TQueryFnData, unknown>

TQueryKey

TQueryKey extends readonly unknown[] = readonly unknown[]

TPageParam

TPageParam = unknown

参数

options

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

一个 ref、普通值或响应式 getter，用于解析出要使用的 UsePrefetchInfiniteQueryOptions — 即所有可传给 queryClient.infiniteQuery 的配置项。

queryClient?

QueryClient

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

返回值

void

示例

1<script setup lang="ts">2import { infiniteQueryOptions, usePrefetchInfiniteQuery } from '@tanstack/vue-query'3import Projects from './Projects.vue'45const projectsOptions = infiniteQueryOptions({6  queryKey: ['projects'],7  queryFn: ({ pageParam }) => fetchProjects(pageParam),8  initialPageParam: 0,9  getNextPageParam: (lastPage) => lastPage.nextId,10})1112// Fire the prefetch as soon as this component runs, before `Projects` mounts and calls `useInfiniteQuery`.13usePrefetchInfiniteQuery(projectsOptions)14</script>15 16<template>17  <Projects />18</template>