GraphQL Client Configurator

Apollo Client is the most feature-rich: caching, local state, subscriptions, DevTools. Best for complex apps. urql is lighter, more composable, and excellent for Next.js/RSC. graphql-request is minimal — just sends requests, no cache. Use Apollo for enterprise apps, urql for modern React/Next.js, graphql-request for simple scripts or server-side fetching.

InMemoryCache is Apollo's normalized cache. It stores query results by type and ID (e.g., Todo:1, User:42). When a mutation updates an object, any query containing that object automatically updates — no manual cache management needed. Configure typePolicies to control how objects are identified and merged.

cache-first (default): read from cache, only fetch if missing. network-only: always fetch, write to cache. cache-only: never fetch, throw if missing. no-cache: always fetch, never write. cache-and-network: return cache immediately, then update from network. Use cache-and-network for data that should feel instant but stay fresh.

urql uses exchanges (middleware-like composable layers). The default Document Cache caches by query + variables hash — simple but effective. The Normalized Cache (from @urql/exchange-graphcache) works like Apollo's InMemoryCache with entity normalization. The key difference: urql's architecture lets you swap or compose caching strategies without changing your components.

graphql-request is a minimal GraphQL client (~2KB) with zero configuration. It's perfect for: server-side data fetching in Next.js, scripts, CLI tools, or any scenario where you want to send a GraphQL query without managing a cache. It pairs well with TanStack Query or SWR — you use graphql-request as the fetcher function.

Apollo: pass headers in the authLink using setContext. urql: use fetchOptions to return dynamic headers. graphql-request: pass headers directly to the GraphQLClient constructor or per-request. For all clients, read the auth token from localStorage/cookies in the header function — never hardcode tokens in source code.