Apollo Client
GraphQL client for JavaScript/React — handles queries, mutations, subscriptions, caching, and state management for GraphQL APIs. Apollo Client 3 features: useQuery() and useMutation() React hooks, InMemoryCache with automatic normalization, cache-first / network-only / cache-and-network fetch policies, optimistic updates (optimisticResponse), Apollo Link chain (auth, error, retry), subscription via WebSocket (subscribeToMore), refetchQueries after mutations, field-level cache policies, reactive variables (makeVar()), pagination helpers (fetchMore, relayStylePagination), and Apollo Client DevTools. Standard GraphQL client for React agent frontends querying agent GraphQL APIs.
Score Breakdown
⚙ Agent Friendliness
🔒 Security
Apollo Client stores auth tokens in memory or localStorage — use httpOnly cookies for agent auth tokens to prevent XSS. Apollo DevTools browser extension exposes full cache including sensitive agent data; disable in production builds. Subscription WebSocket auth: pass token in connectionParams, not URL query string, for agent real-time security.
⚡ Reliability
Best When
Your React agent frontend queries a GraphQL API and needs automatic caching, optimistic updates, and real-time subscriptions — Apollo Client's InMemoryCache eliminates duplicate requests and keeps agent UI data synchronized.
Avoid When
You're using REST APIs (use TanStack Query), Vue/Svelte (use urql), or you want a lighter GraphQL client without Apollo's full cache layer (use graphql-request).
Use Cases
- • Agent data fetching — const { data, loading, error } = useQuery(GET_AGENTS, { variables: { status: 'active' } }) fetches agent list; Apollo caches and deduplicates identical queries; automatic React re-render when agent data updates
- • Agent mutation with cache update — const [createAgent] = useMutation(CREATE_AGENT, { update(cache, { data: { createAgent } }) { cache.modify({ fields: { agents(existing) { return [...existing, createAgent] } } }) }) } adds new agent to cache without refetch
- • Optimistic agent UI — useMutation with optimisticResponse: { createAgent: { id: 'temp', name: newName, __typename: 'Agent' } } shows agent immediately in UI before server confirms; reverts on error; instant agent creation feeling
- • Agent subscriptions for real-time — useSubscription(AGENT_STATUS_CHANGED, { onData: ({ data }) => updateAgentUI(data) }) or subscribeToMore for agent status updates via WebSocket; Apollo handles reconnection and cache merging
- • Agent pagination — useQuery with fetchMore({ variables: { cursor: pageInfo.endCursor } }) appends next agent page; relayStylePagination() field policy merges pages automatically in InMemoryCache for infinite scroll agent lists
Not For
- • REST API clients — Apollo Client is GraphQL-specific; for REST agent APIs use TanStack Query, SWR, or Axios
- • Non-React frameworks — Apollo Client has React-specific hooks; use Apollo Client's core package or framework adapters for Vue/Angular agent frontends, or use urql as a lighter alternative
- • Server-side GraphQL — Apollo Client is a frontend library; for Node.js GraphQL server use Apollo Server or GraphQL Yoga
Interface
Authentication
Auth via Apollo Link: authLink = setContext((_, { headers }) => { return { headers: { ...headers, authorization: token } } }). Link chain adds auth header to all agent API requests. Token refresh via error link catching 401 responses.
Pricing
Apollo Client is MIT licensed. Apollo Studio/GraphOS has free and paid tiers for managed services.
Agent Metadata
Known Gotchas
- ⚠ InMemoryCache requires __typename and id for normalization — Apollo caches objects by __typename + id; without id in query selections, cache doesn't normalize and may show stale agent data; always include id in agent query fragments; custom keyFields in InMemoryCache type policies for non-standard agent entity keys
- ⚠ Stale cache after mutation requires explicit update — useMutation doesn't auto-update cache for other queries; after creating agent, other agent list queries still show old data; use update() callback with cache.modify() or refetchQueries: ['GetAgents'] to keep agent list current after mutation
- ⚠ Network-only vs cache-and-network distinction — fetchPolicy: 'network-only' skips cache reads but writes to cache; fetchPolicy: 'no-cache' skips both read and write; agent dev debugging showing stale data may need 'network-only' temporarily; production agent views should use 'cache-and-network' for instant + fresh pattern
- ⚠ Apollo Link order matters for error handling — links execute request in order: auth → http; error links execute in reverse; RetryLink must come before HttpLink in agent link chain; incorrect link order causes auth headers missing from retried requests or error handler not catching network failures
- ⚠ useQuery variables object reference triggers refetch — { variables: { status: filter } } with object literal creates new reference every render; Apollo compares variables by reference not value; agent filter components must memoize variables object or use useMemo to prevent infinite refetch loop
- ⚠ Subscription cleanup required on unmount — useSubscription automatically unsubscribes on component unmount; subscribeToMore returns unsubscribe function that must be called in useEffect cleanup; agent components using subscribeToMore without cleanup cause memory leaks and zombie subscriptions receiving updates after component unmount
Alternatives
Full Evaluation Report
Comprehensive deep-dive: security analysis, reliability audit, agent experience review, cost modeling, competitive positioning, and improvement roadmap for Apollo Client.
AI-powered analysis · PDF + markdown · Delivered within 30 minutes
Package Brief
Quick verdict, integration guide, cost projections, gotchas with workarounds, and alternatives comparison.
Delivered within 10 minutes
Score Monitoring
Get alerted when this package's AF, security, or reliability scores change significantly. Stay ahead of regressions.
Continuous monitoring
Scores are editorial opinions as of 2026-03-07.