Capítulo 15 de 80
A fixed number of parallel queries needs no special API — just call useQuery side by side; a dynamic number (changing per render) requires useQueries instead, since calling a variable number of hooks would break the Rules of Hooks.
useQuery/useInfiniteQuery calls placed side by side in a component execute in parallel automatically — no extra wiring needed.useSuspenseQueries (recommended) or split each into its own component instead.useQueries): takes { queries: [...] }, an array of query-config objects built at render time (e.g. via .map), and returns an array of results in the same order — the escape hatch for "N queries, N determined by data."select: an inline select inside a useQueries query object can't infer its argument from that same object's queryFn (falls back to unknown) — annotate select's parameter explicitly, or build the query with queryOptions instead.// Fixed count — plain useQuery calls, run in parallel
const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers })
const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fetchTeams })
// Dynamic count — useQueries
function App({ users }) {
const userQueries = useQueries({
queries: users.map((user) => ({
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
})),
})
}
useQueries.useQueries when the query count is fixed — plain useQuery calls are simpler and already run in parallel.useSuspenseQueries for a dynamic set, or separate components for a fixed set.select's parameter type explicitly inside useQueries query objects, or use queryOptions, to avoid silently losing type inference.useSuspenseQueries fix.useQueries combined with a prior query's result to build the dynamic list.