usePrefetchQuery

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

Defined in: vue-query/src/usePrefetchQuery.ts:86

usePrefetchQuery 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 useQuery. You can pass everything to usePrefetchQuery that you can pass to queryClient.query, though queryKey is always required, and queryFn is required unless a default query function has been defined.

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 queryOptions, for example) changes.

Fire this during render, before a suspense boundary that wraps a component using useQuery's suspense() — see the Suspense guide.

Type Parameters#

TQueryFnData#

TQueryFnData = unknown

TError#

TError = Error

TData#

TData = TQueryFnData

TQueryData#

TQueryData = TQueryFnData

TQueryKey#

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters#

options#

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

A ref, plain value, or reactive getter resolving to the UsePrefetchQueryOptions to use — everything you can pass to queryClient.query.

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 { usePrefetchQuery } from '@tanstack/vue-query'
import Posts from './Posts.vue'

// Fire the prefetch as soon as this component runs, before `Posts` mounts and calls `useQuery`.
usePrefetchQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts,
})
</script>

<template>
  <Posts />
</template>