Parallel Queries in React

import { useQueries } from '@tanstack/react-query'

// Multiple parallel queries with useQueries
function Dashboard({ userIds }) {
  const userQueries = useQueries({
    queries: userIds.map(id => ({
      queryKey: ['user', id],
      queryFn: () => fetchUser(id),
      staleTime: 1000 * 60 * 5
    }))
  })

  const isLoading = userQueries.some(query => query.isLoading)
  const isError = userQueries.some(query => query.isError)

  if (isLoading) return 'Loading users...'
  if (isError) return 'Error loading users'

  return (
    <div>
      {userQueries.map((query, index) => (
        <div key={userIds[index]}>
          {query.data?.name}
        </div>
      ))}
    </div>
  )
}