Parallel Queries

"Parallel" queries are queries that are executed in parallel, or at the same time so as to maximize fetching concurrency.

Manual Parallel Queries#

When the number of parallel queries does not change, there is no extra effort to use parallel queries. Just use any number of TanStack Query's useQuery and useInfiniteQuery primitives side-by-side!

function App () {
  // The following queries will execute in parallel
  const usersQuery = useQuery(() => ({ queryKey: ['users'], queryFn: fetchUsers }))
  const teamsQuery = useQuery(() => ({ queryKey: ['teams'], queryFn: fetchTeams }))
  const projectsQuery = useQuery(() => ({ queryKey: ['projects'], queryFn: fetchProjects }))
  ...
}

Dynamic Parallel Queries with useQueries#

If the number of queries you need to execute changes, you cannot use manual querying since that would break reactivity. Instead, TanStack Query provides a useQueries function, which you can use to dynamically execute as many queries in parallel as you'd like.

useQueries accepts an accessor that returns an options object with a queries key whose value is an array of query objects. It returns an array of query results:

function App(props) {
  const userQueries = useQueries(() => ({
    queries: props.users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  }))
}

When using TypeScript, an inline select written on a query object passed to useQueries can't infer its data argument from that same object's queryFn — it falls back to unknown. Annotate the select parameter explicitly, or define the query with the queryOptions helper, to keep type inference. See this known limitation.