usePrefetchInfiniteQuery

function usePrefetchInfiniteQuery<TQueryFnData, TError, TData, TQueryKey, TPageParam>(options, queryClient?): void;

Defined in: 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?#

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>