usePrefetchInfiniteQuery
1function usePrefetchInfiniteQuery<TQueryFnData = unknown, TError = Error, TData = InfiniteData<TQueryFnData, unknown>, TQueryKey extends readonly unknown[] = readonly unknown[], TPageParam = unknown>(options: UsePrefetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient?: QueryClient): void;定义位置:packages/react-query/src/usePrefetchInfiniteQuery.tsx:53
usePrefetchInfiniteQuery 不返回任何值,仅应在渲染期间调用,以在包裹使用 useSuspenseInfiniteQuery 的组件的 Suspense 边界之前触发预取。你可以向 usePrefetchInfiniteQuery 传入所有能传给 queryClient.infiniteQuery 的参数,但 queryKey、initialPageParam 和 getNextPageParam 始终为必填项,而 queryFn 仅在未定义默认查询函数时才为必填项。
getNextPageParam 接收无限数据列表的最后一页、包含所有页的完整数组,以及 pageParam 信息,并应返回一个变量,该变量将作为 context.pageParam 传入你的查询函数。返回 undefined 或 null 表示没有下一页可用。
如果查询已存在任何缓存状态(包括此前尝试遗留的 pending/error 状态),则跳过预取;因此每次渲染都调用此函数开销很低,不会重新拉取已存在或已在进行中的数据。
类型参数
TQueryFnData
TQueryFnData = unknown
TError
TError = Error
TData
TData = InfiniteData<TQueryFnData, unknown>
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
TPageParam
TPageParam = unknown
参数
options
UsePrefetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>
要使用的 UsePrefetchInfiniteQueryOptions —— 即所有可传给 queryClient.infiniteQuery 的选项。
queryClient?
使用此参数指定自定义 QueryClient;否则将使用最近上下文中的 QueryClient。
返回值
void
示例
1import { Suspense } from 'react'2import { infiniteQueryOptions, usePrefetchInfiniteQuery } from '@tanstack/react-query'3 4const projectsOptions = infiniteQueryOptions({5 queryKey: ['projects'],6 queryFn: ({ pageParam }) => fetchProjects(pageParam),7 initialPageParam: 0,8 getNextPageParam: (lastPage) => lastPage.nextId,9})10 11function App() {12 // Fire the prefetch during render, before the suspense boundary below.13 usePrefetchInfiniteQuery(projectsOptions)14 15 return (16 <Suspense fallback={<h1>Loading projects...</h1>}>17 <Projects />18 </Suspense>19 )20}