// Network errors: fetch throws, or HTTP returns 4xx/5xx
// Apollo surfaces these as error.networkError
const { data, error } = useQuery(GET_USER)
if (error?.networkError) {
  // Server is unreachable, request timed out, or server returned 500
  return <ServiceUnavailablePage />
}

{
  "data": {
    "user": {
      "id": "1",
      "name": "Alice",
      "orders": null
    }
  },
  "errors": [
    {
      "message": "Not authenticated",
      "locations": [{ "line": 5, "column": 5 }],
      "path": ["user", "orders"],
      "extensions": {
        "code": "UNAUTHENTICATED"
      }
    }
  ]
}

{
  "errors": [
    {
      "message": "You must be authenticated to access this resource",
      "extensions": {
        "code": "UNAUTHENTICATED",
        "field": "orders"
      }
    }
  ]
}

import { onError } from '@apollo/client/link/error'

// In the ErrorLink — handle globally
const errorLink = onError(({ graphQLErrors }) => {
  if (!graphQLErrors) return

  for (const error of graphQLErrors) {
    switch (error.extensions?.code) {
      case 'UNAUTHENTICATED':
        // Token expired globally — refresh and retry (covered in Part 3)
        break

      case 'FORBIDDEN':
        // User lacks permission — redirect, don't retry
        router.push('/access-denied')
        break

      case 'NOT_FOUND':
        // Entity doesn't exist — let the component render a 404 state
        break
    }
  }
})

// errorPolicy: 'none' (DEFAULT)
// Throws on the first execution error. Partial data is DISCARDED.
const { data, error } = useQuery(GET_USER, { errorPolicy: 'none' })
// If orders resolver fails: data is null, error is set. Orders UI can't render at all.

// errorPolicy: 'all'
// Returns both data and errors. Partial data is AVAILABLE.
const { data, error } = useQuery(GET_USER, { errorPolicy: 'all' })
// If orders resolver fails: data.user.name is present, data.user.orders is null, error has details.

// errorPolicy: 'ignore'
// Returns partial data. Errors are SILENTLY DISCARDED.
// Almost never correct — you lose the ability to show error states.

// ✅ Set globally in ApolloClient defaultOptions
const client = new ApolloClient({
  link: from([authLink, retryLink, errorLink, httpLink]),
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      errorPolicy: 'all',
    },
    query: {
      errorPolicy: 'all',
    },
  },
})

function UserDashboard({ userId }: { userId: string }) {
  const { data, error } = useQuery(GET_USER_DASHBOARD, {
    variables: { id: userId },
    errorPolicy: 'all',
  })

  // ✅ Find the specific error for the orders field
  const ordersError = error?.graphQLErrors.find(
    e => e.path?.includes('orders')
  )

  return (
    <div>
      {/* Critical data — always present if user resolver succeeded */}
      <h1>{data?.user?.name ?? 'Loading...'}</h1>

      {/* Orders zone — independently fallible */}
      {ordersError ? (
        <OrdersErrorState code={ordersError.extensions?.code as string} />
      ) : (
        <OrderList orders={data?.user?.orders} />
      )}
    </div>
  )
}

import { ErrorBoundary } from 'react-error-boundary'
import { useSuspenseQuery } from '@apollo/client'

function UserDashboard({ userId }: { userId: string }) {
  return (
    <div>
      {/* Profile header — isolated zone */}
      <ErrorBoundary fallback={<ProfileError />}>
        <Suspense fallback={<ProfileSkeleton />}>
          <UserProfile userId={userId} />
        </Suspense>
      </ErrorBoundary>

      {/* Orders section — independently isolated */}
      <ErrorBoundary fallback={<OrdersUnavailable />}>
        <Suspense fallback={<OrdersSkeleton />}>
          <OrderList userId={userId} />
        </Suspense>
      </ErrorBoundary>
    </div>
  )
}

function OrderList({ userId }: { userId: string }) {
  // ✅ throwOnError: true causes execution errors to propagate to the nearest ErrorBoundary
  const { data } = useSuspenseQuery(GET_ORDERS, {
    variables: { userId },
    errorPolicy: 'all',
    throwOnError: (errors) =>
      errors.some(e => e.extensions?.code !== 'NOT_FOUND'),
      // NOT_FOUND: render empty state in component
      // Everything else: propagate to ErrorBoundary
  })

  if (!data?.user?.orders?.length) return <EmptyOrdersState />
  return <OrderListView orders={data.user.orders} />
}

const [updateUserName] = useMutation(UPDATE_USER_NAME, {
  optimisticResponse: {
    updateUser: { __typename: 'User', id: userId, name: newName },
  },
  errorPolicy: 'all',

  onError: (error, clientOptions) => {
    // ✅ Manual rollback required with errorPolicy: 'all'
    client.cache.modify({
      id: client.cache.identify({ __typename: 'User', id: userId }),
      fields: {
        name: () => previousName, // Restore pre-mutation value
      },
    })

    // Show error to user
    const code = error.graphQLErrors[0]?.extensions?.code
    if (code === 'FORBIDDEN') toast.error('You do not have permission to rename this user.')
    if (code === 'VALIDATION_ERROR') toast.error('Name must be between 2 and 50 characters.')
  },
})