parallel-queries.md

id	parallel-queries
title	Parallel Queries
ref	docs/framework/react/guides/parallel-queries.md
replace	If the number of queries you need to execute is changing from render to render, you cannot use manual querying since that would violate the rules of hooks. Instead, hook React hooks useQuery useInfiniteQuery useQueries function Angular functions injectQuery injectInfiniteQuery injectQueries

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

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

@Component({
  // ...
})
export class AppComponent {
  users = signal<Array<User>>([])

  userQueries = injectQueries(() => ({
    queries: this.users().map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  }))
}