64 lines
1.5 KiB
Markdown
64 lines
1.5 KiB
Markdown
---
|
|
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': 'function',
|
|
'React': 'Angular',
|
|
'hooks': 'functions',
|
|
'useQuery': 'injectQuery',
|
|
'useInfiniteQuery': 'injectInfiniteQuery',
|
|
'useQueries': 'injectQueries',
|
|
}
|
|
---
|
|
|
|
[//]: # 'Example'
|
|
|
|
```ts
|
|
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,
|
|
}))
|
|
}
|
|
```
|
|
|
|
[//]: # 'Example'
|
|
[//]: # 'Info'
|
|
[//]: # 'Info'
|
|
[//]: # 'DynamicParallelIntro'
|
|
|
|
TanStack Query provides `injectQueries`, which you can use to dynamically execute as many queries in parallel as you'd like.
|
|
|
|
[//]: # 'DynamicParallelIntro'
|
|
[//]: # 'Example2'
|
|
|
|
```ts
|
|
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),
|
|
}
|
|
}),
|
|
}))
|
|
}
|
|
```
|
|
|
|
[//]: # 'Example2'
|