// ❌ The setup that fails silently in production
const client = new ApolloClient({
  uri: '/graphql',
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
  cache: new InMemoryCache(),
})

import { ApolloLink, Observable } from '@apollo/client'

// A simple logging link
const loggingLink = new ApolloLink((operation, forward) => {
  console.log(`[GraphQL] ${operation.operationName}`)
  return forward(operation)  // ← Pass to next link
})

// ✅ Correct chain — terminating link is always last
const link = from([
  authLink,    // Non-terminating: adds Authorization header
  retryLink,   // Non-terminating: retries on network failure
  errorLink,   // Non-terminating: intercepts errors from HttpLink
  httpLink,    // Terminating: sends the HTTP request
])

// ❌ Wrong order — ErrorLink before RetryLink
const link = from([authLink, errorLink, retryLink, httpLink])
// Problem: errorLink intercepts network errors before retryLink can retry them
// Result: retry never fires on a network failure

// ✅ Correct order — RetryLink wraps ErrorLink
const link = from([authLink, retryLink, errorLink, httpLink])
// RetryLink wraps everything after it — retries the full remaining chain
// ErrorLink sees the final error only after all retry attempts are exhausted

import { setContext } from '@apollo/client/link/context'

const authLink = setContext(async (_, { headers }) => {
  // ✅ Token read on every request — always current
  const token = await getAccessToken()  // could be from memory, cookie, or refresh logic

  return {
    headers: {
      ...headers,
      Authorization: token ? `Bearer ${token}` : '',
    },
  }
})

import { RetryLink } from '@apollo/client/link/retry'

const retryLink = new RetryLink({
  delay: {
    initial: 300,    // 300ms before first retry
    max: 5000,       // max 5s between retries
    jitter: true,    // randomize to avoid thundering herd
  },
  attempts: {
    max: 3,
    retryIf: (error, _operation) => {
      // ✅ Only retry on network errors, not GraphQL execution errors
      return !!error && error.statusCode !== 401
    },
  },
})

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

const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
  if (graphQLErrors) {
    for (const error of graphQLErrors) {
      switch (error.extensions?.code) {
        case 'UNAUTHENTICATED':
          // Token expired — refresh and retry the operation
          return fromPromise(
            refreshToken().then(newToken => {
              const oldHeaders = operation.getContext().headers
              operation.setContext({
                headers: { ...oldHeaders, Authorization: `Bearer ${newToken}` },
              })
            })
          ).flatMap(() => forward(operation))

        case 'FORBIDDEN':
          // Redirect to access-denied page — don't retry
          router.push('/access-denied')
          break
      }
    }
  }

  if (networkError) {
    console.error(`[Network error]: ${networkError}`)
    // networkError.statusCode is available for HTTP-level errors
  }
})

import { HttpLink } from '@apollo/client'

const httpLink = new HttpLink({
  uri: '/graphql',
  credentials: 'same-origin',  // Include cookies for same-origin requests
  fetchOptions: {
    method: 'POST',
  },
})

import { ApolloClient, InMemoryCache, from } from '@apollo/client'

const client = new ApolloClient({
  link: from([authLink, retryLink, errorLink, httpLink]),
  cache: new InMemoryCache({
    typePolicies: {
      // keyFields, field policies — covered in Part 2
    },
  }),
})

// app/providers.tsx (Next.js App Router) or src/main.tsx (Vite)
'use client'

import { ApolloClient, InMemoryCache, ApolloProvider, from } from '@apollo/client'
import { authLink, retryLink, errorLink, httpLink } from './links'

const client = new ApolloClient({
  link: from([authLink, retryLink, errorLink, httpLink]),
  cache: new InMemoryCache(),
})

export function Providers({ children }: { children: React.ReactNode }) {
  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

'use client'

import { useMemo } from 'react'
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'

function makeClient() {
  return new ApolloClient({
    link: from([authLink, retryLink, errorLink, httpLink]),
    cache: new InMemoryCache(),
    ssrMode: typeof window === 'undefined',  // Prevents cache from persisting between SSR requests
  })
}

export function ApolloWrapper({ children }: { children: React.ReactNode }) {
  const client = useMemo(() => makeClient(), [])
  return <ApolloProvider client={client}>{children}</ApolloProvider>
}

import { makeVar, useReactiveVar } from '@apollo/client'

// Define at module level — survives component unmounts
const isModalOpenVar = makeVar<boolean>(false)
const draftCommentVar = makeVar<string>('')

function CommentModal() {
  const isOpen = useReactiveVar(isModalOpenVar)
  const draft = useReactiveVar(draftCommentVar)

  return isOpen ? (
    <Modal>
      <textarea
        value={draft}
        onChange={e => draftCommentVar(e.target.value)}  // ← Write by calling as function
      />
      <button onClick={() => isModalOpenVar(false)}>Close</button>
    </Modal>
  ) : null
}

// ❌ Storing server data in a reactive variable
const currentUserVar = makeVar<User | null>(null)
// Problem: this creates a second, unsynchronized copy of User:1
// Mutations that update the cache won't update this variable

// ✅ Reading server data from the cache directly
function useCurrentUser() {
  const { data } = useQuery(GET_ME)
  return data?.me  // ← Reads from the replica — stays synchronized automatically
}

// ✅ Reactive variables for ephemeral UI state only
const selectedTabVar = makeVar<'profile' | 'orders'>('profile')

import { BatchHttpLink } from '@apollo/client/link/batch-http'

const httpLink = new BatchHttpLink({
  uri: '/graphql',
  batchMax: 5,      // Max operations per batch
  batchInterval: 20, // Wait 20ms to collect operations before sending
})

// Detect HTTP/2 support and use the appropriate link
const isHTTP2 = typeof window !== 'undefined' && 'connection' in navigator
const httpLink = isHTTP2
  ? new HttpLink({ uri: '/graphql' })
  : new BatchHttpLink({ uri: '/graphql', batchMax: 5, batchInterval: 20 })

import { SchemaLink } from '@apollo/client/link/schema'
import { schema } from '../server/schema'

// In test setup — no fetch mock, no HTTP server
const client = new ApolloClient({
  link: new SchemaLink({ schema }),
  cache: new InMemoryCache(),
})