3.2 KiB
id, title
| id | title |
|---|---|
| usePrefetchInfiniteQuery | usePrefetchInfiniteQuery |
function usePrefetchInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): void;
Defined in: packages/vue-query/src/usePrefetchInfiniteQuery.ts:94
usePrefetchInfiniteQuery does not return anything — it fires a prefetch as a reactive side effect, useful
for kicking off a fetch ahead of the component that will actually render the data with useInfiniteQuery.
You can pass everything to usePrefetchInfiniteQuery that you can pass to queryClient.infiniteQuery,
though queryKey, initialPageParam, and getNextPageParam are always required, and queryFn is required
unless a default query function has been defined.
getNextPageParam receives both the last page of the infinite list of data and the full array of all pages,
as well as pageParam information, and should return a single variable that will be passed to your query
function as context.pageParam. Return undefined or null to indicate there is no next page available.
The prefetch is skipped if the query already has any cached state — including a pending/error state left
over from a previous attempt — so it won't refetch data that's already there or already in flight. It
re-runs whenever a reactive dependency in options (built with infiniteQueryOptions, for example) changes.
Fire this during render, before a suspense boundary that wraps a component using useInfiniteQuery's
suspense() — see the Suspense guide.
Type Parameters
TQueryFnData
TQueryFnData = unknown
TError
TError = Error
TData
TData = InfiniteData<TQueryFnData, unknown>
TQueryKey
TQueryKey extends readonly unknown[] = readonly unknown[]
TPageParam
TPageParam = unknown
Parameters
options
MaybeRefOrGetter<MaybeRefDeep<UsePrefetchInfiniteQueryOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>>>
A ref, plain value, or reactive getter resolving to the
UsePrefetchInfiniteQueryOptions to use — everything you can pass to queryClient.infiniteQuery.
queryClient?
Use this to use a custom QueryClient. Otherwise, the one provided by VueQueryPlugin
will be used.
Returns
void
void — nothing is returned.
Example
<script setup lang="ts">
import { infiniteQueryOptions, usePrefetchInfiniteQuery } from '@tanstack/vue-query'
import Projects from './Projects.vue'
const projectsOptions = infiniteQueryOptions({
queryKey: ['projects'],
queryFn: ({ pageParam }) => fetchProjects(pageParam),
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage.nextId,
})
// Fire the prefetch as soon as this component runs, before `Projects` mounts and calls `useInfiniteQuery`.
usePrefetchInfiniteQuery(projectsOptions)
</script>
<template>
<Projects />
</template>