Error Boundary Chain

The dashboard app below makes several GraphQL queries, but when a network error occurs, the entire app crashes with an unhandled promise rejection. There is no centralized error handling. Your task: 1. Create an Apollo error link (onError from @apollo/client/link/error) that intercepts and logs GraphQL and network errors. 2. Chain the error link before the HTTP link using ApolloLink.from(). 3. Add a React ErrorBoundary component that catches rendering errors and shows a fallback UI. 4. Make sure GraphQL errors are extracted and surfaced, not swallowed. This requires changes to both the Apollo Client setup and the React component tree.

Problem Code

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

// Bug: no error link — network errors crash silently
const client = new ApolloClient({
  link: new HttpLink({ uri: '/graphql' }),
  cache: new InMemoryCache(),
});

const GET_DASHBOARD = gql`
  query GetDashboard {
    dashboard {
      totalUsers
      totalRevenue
      recentOrders {
        id
        amount
        status
      }
    }
  }
`;

// Bug: no error boundary — render errors crash the whole app
const Dashboard = () => {
  const { data, loading, error } = useQuery(GET_DASHBOARD);

  if (loading) return <p>Loading dashboard...</p>;
  if (error) throw error; // This crashes with no boundary!

  return (
    <div>
      <h1>Dashboard</h1>
      <div>
        <p>Total Users: {data.dashboard.totalUsers}</p>
        <p>Total Revenue: ${data.dashboard.totalRevenue}</p>
      </div>
      <h2>Recent Orders</h2>
      <ul>
        {data.dashboard.recentOrders.map((order: { id: string; amount: number; status: string }) => (
          <li key={order.id}>
            Order #{order.id} — ${order.amount} ({order.status})
          </li>
        ))}
      </ul>
    </div>
  );
};

const App = () => (
  <Dashboard />
);

export default App;