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 functions side-by-side!
tsx
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 }))
...
}
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:
tsx
function App(props) {
const userQueries = useQueries(() => ({
queries: props.users.map((user) => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
}),
}))
}
function App(props) {
const userQueries = useQueries(() => ({
queries: props.users.map((user) => {
return {
queryKey: ['user', user.id],
queryFn: () => fetchUserById(user.id),
}
}),
}))
}
