useQueries

useQueries accepts an options object containing a dynamically sized queries array. Each entry uses query options similar to useQuery; the hook executes them in parallel and normally returns results in input order. An optional combine function can transform those results into one value, while a second argument can provide a custom QueryClient.

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

TCombinedResult: without combine, an array of query results in input order; with combine, the value returned by combine.

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

type Post = { id: number; title: string }

const fetchPost = async (id: number): Promise<Post> => {
  const response = await fetch(`/api/posts/${id}`)
  if (!response.ok) throw new Error('Request failed')
  return response.json()
}

export function Posts({ ids }: { ids: number[] }) {
  const results = useQueries({
    queries: ids.map((id) => ({
      queryKey: ['post', id],
      queryFn: () => fetchPost(id),
    })),
    combine: (queries) => ({
      posts: queries.map((query) => query.data),
      pending: queries.some((query) => query.isPending),
    }),
  })

  return <pre>{JSON.stringify(results)}</pre>
}

Creates one query for every post ID and combines their results into a single object.