usePrefetchQuery

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

Defined in: preact-query/src/usePrefetchQuery.tsx:42

usePrefetchQuery does not return anything, it should be used just to fire a prefetch during render, before a suspense boundary that wraps a component that uses useSuspenseQuery. 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 calling this on every render is cheap and won't refetch data that's already there or already in flight.

Type Parameters#

TQueryFnData#

TQueryFnData = unknown

TError#

TError = Error

TData#

TData = TQueryFnData

TQueryData#

TQueryData = TQueryFnData

TQueryKey#

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters#

options#

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

The UsePrefetchQueryOptions to use — everything you can pass to queryClient.query.

queryClient?#

QueryClient

Use this to use a custom QueryClient. Otherwise, the one from the nearest context will be used.

Returns#

void

void — nothing is returned.

Example#

import { Suspense } from 'preact/compat'
import { usePrefetchQuery } from '@tanstack/preact-query'

function App() {
  // Fire the prefetch during render, before the suspense boundary below.
  usePrefetchQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  })

  return (
    <Suspense fallback={<h1>Loading posts...</h1>}>
      <Posts />
    </Suspense>
  )
}