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 injectQuery and injectInfiniteQuery functions side-by-side!

export class AppComponent {
  // The following queries will execute in parallel
  readonly usersQuery = injectQuery(() => ({
    queryKey: ['users'],
    queryFn: fetchUsers,
  }))
  readonly teamsQuery = injectQuery(() => ({
    queryKey: ['teams'],
    queryFn: fetchTeams,
  }))
  readonly projectsQuery = injectQuery(() => ({
    queryKey: ['projects'],
    queryFn: fetchProjects,
  }))
}

Dynamic Parallel Queries with injectQueries#

TanStack Query provides injectQueries, which you can use to dynamically execute as many queries in parallel as you'd like.

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

export class AppComponent {
  users = signal<Array<User>>([])

  // Please note injectQueries is under development and this code does not work yet
  readonly userQueries = injectQueries(() => ({
    queries: 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 injectQueries 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.