Data Fetching Patterns: REST, GraphQL, tRPC & Real-time
Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.
Topic content
Modern apps choose between REST (resource-based), GraphQL (client-shaped queries), tRPC (type-safe RPC), and real-time solutions (WebSockets/SSE) based on data complexity, freshness requirements, and developer experience.
REST = ordering individual dishes from a menu. GraphQL = customizing your meal exactly how you want. tRPC = ordering from your favorite local chef who knows you well. Real-time = the waiter keeps bringing updates as new dishes are ready.
REST
Resource endpoints
GraphQL
Client-defined queries
1REST
Resource-based architecture using standard HTTP methods. Simple, cacheable, and widely understood, but can lead to over/under-fetching.
2GraphQL
Client requests exactly the data needed in one query. Excellent for complex data relationships and multiple clients, but adds schema and resolver complexity.
3tRPC & gRPC-Web
tRPC provides end-to-end type safety for full-stack TypeScript. gRPC-Web offers efficient protobuf contracts for polyglot backends.
4Real-time Strategies
Polling for simplicity, WebSockets for bidirectional, SSE for server-push. Choose based on freshness needs and complexity tolerance.
- ✓Match fetching strategy to data shape and freshness needs
- ✓REST: Simple, cacheable, widely understood
- ✓GraphQL: Flexible queries, single endpoint
- ✓tRPC: Best end-to-end TypeScript experience
- ✓Real-time: WebSockets for bidirectional, SSE for push
- ✓Optimistic updates improve perceived performance
- ✓Always consider caching, error handling, and loading states