Server Development / GraphQL
Clients
A closer look at Clients.
GraphQL clients compared
Browsers and React apps can talk to GraphQL with fetch, thin wrappers, urql, Apollo Client, Relay, or TanStack Query. This comparison covers what each layer adds—caching, codegen, normalized stores—and when to pick one.
Getting started with urql
urql 5 wires React apps to GraphQL through a client, exchanges, and hooks. This chapter shows createClient with cacheExchange and fetchExchange, auth headers, request policies, mutations, document-cache invalidation, and subscription exchanges.
Typed operations with GraphQL Codegen
GraphQL Codegen client-preset generates typed document nodes and React hooks from .graphql files and your schema. This runbook configures codegen.ts, the graphql() helper, fragment masking, watch mode, and optional persisted operation hashes.
Normalized caching with urql Graphcache
Graphcache stores records and links like a client-side database, enabling mutation updates, optimistic UI, schema-aware keys, and offline replay. This chapter configures @urql/exchange-graphcache for urql 5.