Optimus Agency | Professional Web Development

Loading

Name things for the reader, not the writer.

Tips & tricks

Open the command palette to jump anywhere
Browse blogs and courses by track
Try the live code playground

App.tsx

Apollo 25: Production Checklist

easy⏱ 5 mincourseapollo

Production hardening

A production Apollo setup needs five pillars:

Automatic Persisted Queries (APQ): Instead of sending full query strings (often 5-20KB), send a SHA-256 hash. The server looks up the query by hash. First request sends both hash + query; subsequent requests send only the hash. Saves bandwidth and adds security.
CDN caching: For public queries (no auth), add Cache-Control headers. CDNs can cache GraphQL responses at the edge.
Error monitoring: Use onError link to send errors to Sentry/DataDog. Track GraphQL errors separately from network errors.
Performance budgets: Set limits on query complexity, depth, and response size. Use Apollo Studio for query-level performance tracking.
Schema governance: Use Apollo Schema Registry to track schema changes, run CI checks for breaking changes, and maintain a schema changelog.

// Production-ready client configuration
import { ApolloClient, InMemoryCache, HttpLink, from } from '@apollo/client';
import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
import { onError } from '@apollo/client/link/error';
import { RetryLink } from '@apollo/client/link/retry';
import { sha256 } from 'crypto-hash';

const persistedLink = createPersistedQueryLink({ sha256 });

const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
  // Send to monitoring service
  if (graphQLErrors) {
    Sentry.captureException(new Error(`GraphQL: ${operation.operationName}`), {
      extra: { errors: graphQLErrors },
    });
  }
});

const retryLink = new RetryLink({ attempts: { max: 3 } });
const httpLink = new HttpLink({ uri: '/graphql' });

Configure APQ + monitoring

Create a production Apollo Client with:

createPersistedQueryLink with sha256 for APQ.
An onError link that reports errors to a monitoring object (simulated Sentry).
A RetryLink with { attempts: { max: 3 }, delay: { initial: 300 } }.
A custom metrics link that tracks operation count, error count, and average duration.
A dashboard component that displays these metrics in real-time.

Apollo Studio integration

Apollo Studio (formerly Apollo Graph Manager) provides production-grade observability:

Operation tracing: See p50/p95/p99 latency for every operation.
Field usage: Know which fields are actually queried — safely deprecate unused fields.
Schema checks: CI integration that blocks PRs with breaking schema changes.
Alerts: Get notified when error rates spike or latency exceeds thresholds.

Enable it by setting the APOLLO_KEY environment variable and using @apollo/server's built-in usage reporting. The client-side equivalent is Apollo Client DevTools in development.

// Apollo Studio usage reporting (server-side)
import { ApolloServer } from '@apollo/server';

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [
    ApolloServerPluginUsageReporting({
      sendVariableValues: { all: true },
      sendHeaders: { all: true },
    }),
  ],
});

The production readiness checklist

Before shipping Apollo to production, verify:

Bundle size optimization

Apollo Client's full bundle is ~35KB gzipped. Optimize by:

Import from specific paths: import { useQuery } from '@apollo/client' tree-shakes correctly in modern bundlers.
Don't import @apollo/client/core in React apps — use @apollo/client which includes React bindings.
If you only need queries (no mutations, no subscriptions), consider lighter alternatives like graphql-request for simple cases.
Use @apollo/client/link/batch-http only if you actually batch — each link adds to bundle size.
Run npx source-map-explorer to verify Apollo's contribution to your bundle.

Optimus Agency | Professional Web Development