useSuspenseQuery

function useSuspenseQuery<TQueryFnData, TError, TData, TQueryKey>(options, queryClient?): UseSuspenseQueryResult<TData, TError>;

Defined in: preact-query/src/useSuspenseQuery.ts:55

The options for useSuspenseQuery are the same as for useQuery, except for throwOnError, enabled, and placeholderData.

Caveat: cancellation does not work.

Type Parameters#

TQueryFnData#

TQueryFnData = unknown

TError#

TError = Error

TData#

TData = TQueryFnData

TQueryKey#

TQueryKey extends readonly unknown[] = readonly unknown[]

Parameters#

options#

UseSuspenseQueryOptions<TQueryFnData, TError, TData, TQueryKey>

The UseSuspenseQueryOptions to use — the same options as useQuery, minus the ones listed above.

queryClient?#

QueryClient

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

Returns#

UseSuspenseQueryResult<TData, TError>

The same object as useQuery, except that data is guaranteed to be defined, isPlaceholderData is missing, and status is either success or error (with the derived flags set accordingly).

Remarks#

Multiple useSuspenseQuery calls in the same component suspend serially, causing a request waterfall — each one blocks rendering until it resolves, so the next doesn't even start fetching until then. Use useSuspenseQueries instead when you have more than one suspenseful query in a component, so they fetch in parallel.

Example#

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

function Posts() {
  // `data` is guaranteed to be defined here — no `isPending` check needed.
  const { data, isFetching } = useSuspenseQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
  })

  return (
    <div>
      <h1>Posts {isFetching ? <Spinner /> : null}</h1>
      {data.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  )
}

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