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 createQuery and createInfiniteQuery functions side-by-side!

<script lang="ts">
  import { createQuery } from '@tanstack/svelte-query'
  
  // The following queries will execute in parallel
  const usersQuery = createQuery(() => ({ queryKey: ['users'], queryFn: fetchUsers }))
  const teamsQuery = createQuery(() => ({ queryKey: ['teams'], queryFn: fetchTeams }))
  const projectsQuery = createQuery(() => ({ queryKey: ['projects'], queryFn: fetchProjects }))
  ...
</script>

Dynamic Parallel Queries with createQueries#

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 createQueries function, which you can use to dynamically execute as many queries in parallel as you'd like.

createQueries 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:

<script lang="ts">
  import { createQueries } from '@tanstack/svelte-query'

  const { users }: { users: { id: string }[] } = $props()
  const userQueries = createQueries(() => ({
    queries: users.map((user) => {
      return {
        queryKey: ['user', user.id],
        queryFn: () => fetchUserById(user.id),
      }
    }),
  }))
</script>

When using TypeScript, an inline select written on a query object passed to createQueries 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.