// If you are doing this — Apollo Client is not justified
const { data } = useQuery(GET_USERS)
return <ul>{data?.users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
// Use TanStack Query instead — same result, 34KB smaller bundle

// ❌ Full barrel import — prevents tree-shaking
import { ApolloClient, useQuery, gql } from '@apollo/client'

// ✅ Subpath imports — tree-shakeable
import { ApolloClient } from '@apollo/client/core'
import { useQuery } from '@apollo/client/react'

Request 1 (cold start — query not yet registered on server):
  Client → Server: GET /graphql?extensions={"persistedQuery":{"sha256Hash":"abc123"}}
  Server → Client: { errors: [{ message: "PersistedQueryNotFound" }] }
  Client → Server: POST /graphql { query: "query GetUser...", extensions: {"sha256Hash":"abc123"} }
  Server: registers "abc123" → "query GetUser..." in memory
  Server → Client: { data: { user: {...} } }

Request 2+ (hash registered — steady state):
  Client → Server: GET /graphql?extensions={"persistedQuery":{"sha256Hash":"abc123"}}
  Server → Client: { data: { user: {...} } }  (from server cache or CDN)

import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries'
import { sha256 } from 'crypto-hash'

const persistedQueriesLink = createPersistedQueryLink({
  sha256,
  useGETForHashedQueries: true,  // ← Converts APQ hits to GET requests for CDN cacheability
})

const client = new ApolloClient({
  link: from([
    authLink,
    retryLink,
    errorLink,
    persistedQueriesLink, // ← Before HttpLink, after auth
    httpLink,
  ]),
  cache: new InMemoryCache(),
})

# schema.graphql (server-side)
type Query {
  product(id: ID!): Product @cacheControl(maxAge: 300)        # Cache 5 minutes
  userProfile(id: ID!): User @cacheControl(maxAge: 0)          # Never cache (user-specific)
  publicAnnouncements: [Announcement!]! @cacheControl(maxAge: 3600) # Cache 1 hour
}

Client request (GET with hash) → CDN
  → CDN MISS: forwards to Apollo Router
    → Router executes query, field with @cacheControl(maxAge: 300) is lowest maxAge
    → Router sends: Cache-Control: max-age=300, public
  → CDN stores response for 300 seconds
  → Next client with same hash within 300s → CDN HIT, zero server compute

# Build step: generate the operation manifest
npx graphql-codegen --config codegen.ts

# Deploy manifest to the router before deploying the frontend
rover persisted-queries publish \
  --graph-id $GRAPH_ID \
  --manifest ./src/gql/persisted-query-manifest.json

// Apollo Client sends only the operation ID — no query string, no hash negotiation
import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries'

const persistedQueriesLink = createPersistedQueryLink({
  generateHash: (document) => {
    // Returns the pre-computed ID from the manifest
    return manifestLookup.get(document) ?? sha256(print(document))
  },
})

// Response to an unknown operation
{
  "errors": [
    {
      "message": "PersistedQueryNotFound",
      "extensions": { "code": "PERSISTED_QUERY_NOT_FOUND" }
    }
  ]
}

import { useWatchFragment } from '@apollo/client'
import { graphql } from '../gql'

const UserBadgeFragment = graphql(`
  fragment UserBadgeFragment on User {
    id
    name
    badgeCount
  }
`)

function UserBadge({ userId }: { userId: string }) {
  // ✅ Direct cache subscription — no network request, no useQuery overhead
  const { data } = useWatchFragment({
    fragment: UserBadgeFragment,
    from: { __typename: 'User', id: userId },
  })

  return <span>{data?.name} ({data?.badgeCount})</span>
}

const GET_USER = graphql(`
  query GetUser($id: ID!, $includeOrders: Boolean!) {
    user(id: $id) {
      id
      name
      orders @include(if: $includeOrders) {
        id
        total
      }
    }
  }
`)

// Dashboard: fetch with orders
useQuery(GET_USER, { variables: { id, includeOrders: true } })

// Sidebar: fetch without orders (same query, different variable)
useQuery(GET_USER, { variables: { id, includeOrders: false } })

// Check the protocol before choosing the link
const link = window.location.protocol === 'https:'
  ? new HttpLink({ uri: '/graphql' })          // HTTP/2 — native multiplexing
  : new BatchHttpLink({ uri: '/graphql' })     // HTTP/1.1 — batching helps