Dependent Queries in React

// Sequential dependent queries
function UserProjects({ userId }) {
  // First query
  const userQuery = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId)
  })

  // Second query depends on first
  const projectsQuery = useQuery({
    queryKey: ['projects', userQuery.data?.id],
    queryFn: () => fetchProjects(userQuery.data.id),
    enabled: !!userQuery.data?.id // Only run when user data is available
  })

  return (
    <div>
      <h1>{userQuery.data?.name}</h1>
      <ul>
        {projectsQuery.data?.map(project => (
          <li key={project.id}>{project.name}</li>
        ))}
      </ul>
    </div>
  )
}