Suspense Waterfall Fix

The project page below loads a project and then its tasks. Because the tasks query depends on the project loading first, there is a "waterfall" — the tasks query does not start until the project query finishes, doubling the perceived load time. Your task: 1. Use useBackgroundQuery in the parent component to kick off the tasks query immediately (in parallel with the project query). 2. Pass the queryRef down to the child component. 3. Use useReadQuery in the child to read the data from the queryRef. 4. Wrap the child in a Suspense boundary for loading state. This uses Apollo Client 3.8+ Suspense features.

Problem Code

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_PROJECT = gql`
  query GetProject($projectId: ID!) {
    project(id: $projectId) {
      id
      name
      description
      owner {
        id
        name
      }
    }
  }
`;

const GET_TASKS = gql`
  query GetTasks($projectId: ID!) {
    tasks(projectId: $projectId) {
      id
      title
      status
      assignee {
        id
        name
      }
    }
  }
`;

// Bug: sequential waterfall — tasks wait for project to finish
const TaskList = ({ projectId }: { projectId: string }) => {
  const { data, loading } = useQuery(GET_TASKS, {
    variables: { projectId },
  });

  if (loading) return <p>Loading tasks...</p>;

  return (
    <ul>
      {data?.tasks.map((task: { id: string; title: string; status: string; assignee: { name: string } }) => (
        <li key={task.id}>
          {task.title} — {task.status} (Assigned to: {task.assignee.name})
        </li>
      ))}
    </ul>
  );
};

const ProjectPage = ({ projectId }: { projectId: string }) => {
  const { data, loading } = useQuery(GET_PROJECT, {
    variables: { projectId },
  });

  if (loading) return <p>Loading project...</p>;

  return (
    <div>
      <h1>{data?.project.name}</h1>
      <p>{data?.project.description}</p>
      <p>Owner: {data?.project.owner.name}</p>
      <h2>Tasks</h2>
      {/* Bug: TaskList only mounts (and starts its query) after project loads */}
      <TaskList projectId={projectId} />
    </div>
  );
};

export default ProjectPage;