The Simple Approach: Multiple useQuery calls

This is the most straightforward when you need independent data in the same component:

function Dashboard() {
  const { data: repos, isLoading: reposLoading } = useQuery({
    queryKey: ['repos'],
    queryFn: fetchRepos
  })

  const { data: members, isLoading: membersLoading } = useQuery({
    queryKey: ['members'], 
    queryFn: fetchMembers
  })

  // Each loads independently - great UX!
  if (reposLoading) return <div>Loading repos...</div>
  if (membersLoading) return <div>Loading members...</div>

  return (
    <div>
      <ReposList repos={repos} />
      <MembersList members={members} />
    </div>
  )
}

useQueries for Dynamic Parallel Fetching

This is where it becomes really useful when you need to get data for an unknown number of items:

function useRepoIssues(repos) {
  return useQueries({
    queries: repos?.map(repo => ({
      queryKey: ['repos', repo.name, 'issues'],
      queryFn: () => fetchIssues(repo.name)
    })) ?? []
  })
}

function ReposDashboard() {
  const { data: repos } = useQuery({
    queryKey: ['repos'],
    queryFn: fetchRepos
  })

  const issuesQueries = useRepoIssues(repos)

  // Derive total issues across all repos
  const totalIssues = issuesQueries
    .map(query => query.data?.length ?? 0)
    .reduce((sum, count) => sum + count, 0)

  return (
    <div>
      <h2>Total Issues: {totalIssues}</h2>
      {repos?.map((repo, index) => (
        <RepoCard 
          key={repo.id}
          repo={repo}
          issues={issuesQueries[index]?.data}
          isLoading={issuesQueries[index]?.isLoading}
        />
      ))}
    </div>
  )
}

Shareable Query Options Pattern

// queries.js
export const repoOptions = {
  queryKey: ['repos'],
  queryFn: fetchRepos,
  staleTime: 5 * 60 * 1000 // 5 minutes
}

export const membersOptions = {
  queryKey: ['members'],
  queryFn: fetchMembers,
  staleTime: 10 * 60 * 1000 // 10 minutes
}

// hooks.js
export const useRepos = () => useQuery(repoOptions)
export const useMembers = () => useQuery(membersOptions)

export const useReposAndMembers = () => useQueries({
  queries: [repoOptions, membersOptions]
})

Real-World Example: User Profile Page

function UserProfile({ userId }) {
  const queries = useQueries({
    queries: [
      {
        queryKey: ['user', userId],
        queryFn: () => fetchUser(userId)
      },
      {
        queryKey: ['user', userId, 'posts'],
        queryFn: () => fetchUserPosts(userId)
      },
      {
        queryKey: ['user', userId, 'followers'],
        queryFn: () => fetchUserFollowers(userId)
      }
    ]
  })

  const [user, posts, followers] = queries

  const isLoading = queries.some(q => q.isLoading)
  const hasError = queries.some(q => q.isError)

  if (isLoading) return <ProfileSkeleton />
  if (hasError) return <ErrorMessage />

  return (
    <div>
      <UserInfo user={user.data} />
      <PostsList posts={posts.data} />
      <FollowersList followers={followers.data} />
    </div>
  )
}

The main point is that parallel queries offer the best of both worlds. They allow for separate caching and management while also providing coordinated loading states when needed. This is much better than using Promise.all, which ties everything together!

Parallel queries when working with React Query

Comments

More from this blog

Become a cracked product engineer today

Bipedal, humanoid, and the words for creature shapes in games

Lerp and smoothstep, what they actually do

IK and FK, what they actually are

How to make your textures fast on the GPU

The Simple Approach: Multiple useQuery calls

useQueries for Dynamic Parallel Fetching

Shareable Query Options Pattern

Real-World Example: User Profile Page

Command Palette

Comments

More from this blog

The Simple Approach: Multiple useQuery calls

useQueries for Dynamic Parallel Fetching

Shareable Query Options Pattern

Real-World Example: User Profile Page