2.4 KiB
id, title
| id | title |
|---|---|
| usePrefetchQuery | usePrefetchQuery |
function usePrefetchQuery<TQueryFnData, TError, TData, TQueryData, TQueryKey>(options, queryClient?): void;
Defined in: packages/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?
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>