principletypescriptgraphqlTip
urql vs Apollo Client vs Relay — choosing the right GraphQL client
Viewed 0 times
Apollo ClienturqlRelayclient comparisonbundle sizenormalized cachefragment masking
Problem
Developers pick Apollo Client by default without evaluating whether it fits their needs. Apollo is large (~35kb min+gz) and opinionated. urql is lighter and more composable. Relay requires full buy-in but delivers the best performance for complex apps.
Solution
Choose based on team size, app complexity, and willingness to follow conventions:
- Apollo Client: Large ecosystem, most tutorials, good for teams that want batteries-included. Trade-off: bundle size, complex cache APIs.
- urql: Lightweight (~7kb), composable via exchanges, excellent for apps that don't need complex caching. Works well with SvelteKit, Next.js, and smaller React apps.
- Relay: Meta's client. Requires Relay-compatible schema (connections, node interface), Relay compiler. Massive payoff for large apps with strict performance requirements — co-locates fragments with components, data masking, deferred loading.
Why
Each client has a distinct philosophy. Apollo optimizes for flexibility, urql for simplicity, Relay for correctness and performance at scale. Choosing wrong means fighting the tool later.
Gotchas
- Apollo's bundle size has dropped across v3 but still exceeds urql significantly
- Relay requires Relay-compatible schema conventions — you cannot just drop it onto any API
- urql's document cache (default) is less powerful than Apollo's normalized cache — enable the normalized cache exchange for mutation-safe caching
- Relay's compiler must run as a build step — adds CI complexity
Context
Starting a new project or evaluating a migration from one GraphQL client to another
Revisions (0)
No revisions yet.