// ❌ Using a subscription for data that changes once an hour
useSubscription(INVENTORY_UPDATE_SUBSCRIPTION)
// Better: poll every 5 minutes
useQuery(GET_INVENTORY, { pollInterval: 5 * 60 * 1000 })

// ✅ Subscriptions for real-time collaborative presence
useSubscription(USER_CURSOR_SUBSCRIPTION, {
  variables: { documentId },
})

Client → Server: GQL_CONNECTION_INIT (optionally with auth payload)
Server → Client: GQL_CONNECTION_ACK
Client → Server: GQL_SUBSCRIBE { id, payload: { query, variables } }
Server → Client: GQL_NEXT { id, payload: { data } }   (repeated for each event)
Server → Client: GQL_COMPLETE { id }                   (when subscription ends)

import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'

const wsClient = createClient({
  url: 'wss://api.example.com/graphql',

  // ✅ Reconnection with exponential backoff — mandatory for production
  retryAttempts: Infinity,        // Keep retrying forever
  retryWait: async (retries) => {
    // Exponential backoff: 1s, 2s, 4s, 8s... capped at 30s
    const delay = Math.min(1000 * 2 ** retries, 30_000)
    await new Promise(resolve => setTimeout(resolve, delay))
  },

  // ✅ Lazy mode — connect only when first subscription is registered
  lazy: true,
})

const wsLink = new GraphQLWsLink(wsClient)

import { Client, createClient } from 'graphql-sse'

const sseClient: Client = createClient({
  url: 'https://api.example.com/graphql/stream',
  headers: () => ({
    // ✅ SSE uses standard Authorization headers — works with all proxies
    Authorization: `Bearer ${getAccessToken()}`,
  }),
  retryAttempts: Infinity,
})

import { ApolloClient, InMemoryCache, HttpLink, split, from } from '@apollo/client'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { getMainDefinition } from '@apollo/client/utilities'
import { createClient } from 'graphql-ws'
import { authLink, retryLink, errorLink } from './links'

const httpLink = new HttpLink({ uri: 'https://api.example.com/graphql' })

const wsLink = new GraphQLWsLink(
  createClient({
    url: 'wss://api.example.com/graphql',
    lazy: true,
    retryAttempts: Infinity,
  })
)

// ✅ Route by operation type
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query)
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    )
  },
  wsLink,   // Subscriptions → WebSocket
  httpLink, // Queries + Mutations → HTTP
)

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

// ❌ This header does NOT reach the WebSocket server
const authLink = setContext(async (_, { headers }) => ({
  headers: { ...headers, Authorization: `Bearer ${token}` },
}))
// HTTP headers are sent on the HTTP upgrade request — most WebSocket servers ignore them

const wsClient = createClient({
  url: 'wss://api.example.com/graphql',

  // ✅ Auth via connection_params — standard graphql-ws pattern
  connectionParams: async () => {
    const token = await getAccessToken()
    return { Authorization: `Bearer ${token}` }
  },
})

// Server-side (graphql-ws handler)
const server = useServer(
  {
    schema,
    onConnect: async (ctx) => {
      const token = ctx.connectionParams?.Authorization
      if (!token || !validateToken(token)) {
        throw new Error('Unauthorized')
      }
    },
  },
  wsServer,
)

// ❌ Parallel state channel — disconnected from the cache replica
function ChatRoom({ roomId }: { roomId: string }) {
  const { data } = useQuery(GET_MESSAGES, { variables: { roomId } })
  const [liveMessages, setLiveMessages] = useState<Message[]>([])

  useSubscription(MESSAGE_ADDED, {
    variables: { roomId },
    onData: ({ data }) => {
      setLiveMessages(prev => [...prev, data.data.messageAdded])
    },
  })

  // data.messages and liveMessages are now two separate, unmerged lists
  // Sorting, deduplication, and consistency must be managed manually
}

// ✅ subscribeToMore — merges events into the replica
function ChatRoom({ roomId }: { roomId: string }) {
  const { data, subscribeToMore } = useQuery(GET_MESSAGES, {
    variables: { roomId },
  })

  useEffect(() => {
    const unsubscribe = subscribeToMore({
      document: MESSAGE_ADDED_SUBSCRIPTION,
      variables: { roomId },
      updateQuery: (prev, { subscriptionData }) => {
        const newMessage = subscriptionData.data.messageAdded
        return {
          messages: [...prev.messages, newMessage],
          // The cache normalizes newMessage into Message:${newMessage.id}
          // All other components reading that message will update automatically
        }
      },
    })
    return unsubscribe  // ← Clean up on unmount
  }, [roomId, subscribeToMore])

  return <MessageList messages={data?.messages} />
}