useSuspenseQueries

The hook accepts an array of query configurations and optionally a combine function. It suspends while required data loads, runs the queries in parallel, and returns a combined value or the usual query-result structure with defined data for every query.

function useSuspenseQueries<T, TCombinedResult>(options: object, queryClient?: QueryClient): TCombinedResult;

TCombinedResult; without combine, the result has the useQueries structure, with defined data, no isPlaceholderData, and status limited to success or error.

import { useSuspenseQueries } from '@tanstack/react-query'

async function fetchJson<T>(url: string): Promise<T> {
  const response = await fetch(url)
  if (!response.ok) throw new Error(`HTTP ${response.status}`)
  return response.json() as Promise<T>
}

export function Dashboard() {
  const [users, teams] = useSuspenseQueries({
    queries: [
      { queryKey: ['users'], queryFn: () => fetchJson<string[]>('/api/users') },
      { queryKey: ['teams'], queryFn: () => fetchJson<string[]>('/api/teams') },
    ],
    combine: (results) => ({ users: results[0], teams: results[1] }),
  })

  return <p>{users.length} users in {teams.length} teams</p>
}

Runs both requests through Suspense and combines their results into one value.