REST API vs GraphQL Simulator
Compare REST and GraphQL side-by-side. Understand over-fetching, under-fetching, the N+1 problem, and when to use each approach with interactive scenarios.
Category: API Design
What You Will Learn
- Compare REST and GraphQL request patterns
- Understand over-fetching and under-fetching
- Learn when to choose REST vs GraphQL
Topics covered: api, rest, graphql, educational, interactive, backend
// simulator
REST API vs GraphQL Simulator
Compare REST and GraphQL side-by-side. Understand over-fetching, under-fetching, the N+1 problem, and when to use each approach with interactive scenarios.
Compare data fetching approaches side-by-side
Scenario: Get basic user profile information
compared to REST
GET /api/users/123query {
user(id: "123") {
id
name
email
avatar
}
}Each HTTP request takes ~100ms for DNS lookup, TCP/TLS handshake, and server processing.
REST requires sequentialrequests. For nested data, request 2 can't start until request 1 finishes.
GraphQL bundles everything into one request. The server resolves all data in a single round-trip.
✅ Advantages
- • Simple and well-understood
- • Great HTTP caching with standard headers
- • Easy to debug with browser tools
- • Stateless architecture
- • Works well for simple CRUD operations
❌ Disadvantages
- • Over-fetching: Getting more data than needed
- • Under-fetching: Multiple requests for related data
- • N+1 problem with nested resources
- • Versioning challenges (v1, v2, etc.)
- • No built-in type system
✅ Advantages
- • Fetch exactly what you need, nothing more
- • Single request for complex nested data
- • Strong type system with schema
- • Self-documenting via introspection
- • No versioning needed - evolve schema
❌ Disadvantages
- • Caching is more complex
- • Query complexity attacks possible
- • Steeper learning curve
- • All requests are POST (harder to cache)
- • Overkill for simple APIs
Use REST when:
- • Building simple CRUD APIs
- • Caching is critical (CDN, browser)
- • Team is familiar with REST
- • Public APIs with many consumers
- • File uploads/downloads
Use GraphQL when:
- • Mobile apps need bandwidth efficiency
- • Complex UIs with nested data
- • Rapidly evolving frontend requirements
- • Multiple clients with different needs
- • Real-time subscriptions needed
Try next
// simulator
Agentic Loop Simulator
Watch a coding agent run an agentic loop, one step at a time. A planner, a builder, and a judge cycle through plan, build, verify, and repeat until the goal is met. Toggle the separate judge off to see why an agent grading its own work ships confident bugs. An animation-first, interactive explainer of loop engineering and how it maps to Claude Code.
// simulator
SQL Terminal Simulator
Practice SQL in an interactive browser terminal. Learn SELECT, WHERE, ORDER BY, DISTINCT, aggregates, GROUP BY, HAVING, JOINs, subqueries, and window functions against a small e-commerce schema, with single-table queries evaluated live and verified Postgres output.
// simulator
PostgreSQL Terminal Simulator
Practice the psql tool and Postgres engine in an interactive browser terminal. Explore with meta-commands, read real EXPLAIN plans, add an index to turn a sequential scan into a bitmap index scan, and use BEGIN and ROLLBACK to make changes safe, all against a small e-commerce database with verified PostgreSQL output.