"Parallel" queries are queries that are executed in parallel, or at the same time so as to maximize fetching concurrency.
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
usersQuery = injectQuery(() => ({ queryKey: ['users'], queryFn: fetchUsers }))
teamsQuery = injectQuery(() => ({ queryKey: ['teams'], queryFn: fetchTeams }))
projectsQuery = injectQuery(() => ({
queryKey: ['projects'],
queryFn: fetchProjects,
}))
}
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.
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
userQueries = injectQueries(() => ({
queries: users().map((user) => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
}),
}))
}
export class AppComponent {
users = signal<Array<User>>([])
// Please note injectQueries is under development and this code does not work yet
userQueries = injectQueries(() => ({
queries: users().map((user) => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
}),
}))
}