Solving REST Over-Fetching with GraphQL — Request Only What You Need

In this tutorial, you will learn about Solving REST Over. We cover key concepts, practical examples, and best practices to help you master this topic.

GraphQL solves REST over-fetching by allowing clients to specify exactly which fields they need in the response, eliminating unnecessary data transfer and reducing payload sizes.

What You'll Learn

• How REST APIs over-fetch data
• How GraphQL's field selection prevents over-fetching
• Performance benefits for mobile and slow networks

Why It Matters

Over-fetching wastes bandwidth and slows down applications, especially on mobile networks. GraphQL's precise queries solve this fundamental REST inefficiency.

Code Examples

# GraphQL: Request only needed fields
query {
  user(id: "1") {
    name
    email
  }
}

# Response only includes requested fields
{
  "data": {
    "user": {
      "name": "Alice",
      "email": "alice@example.com"
    }
  }
}

// REST: Always returns all fields (over-fetching)
const response = await fetch('/api/users/1');
const user = await response.json();
// Returns: id, name, email, address, phone, avatar,
// createdAt, updatedAt, role, settings, ... (many more)
// Even if you only need name and email

// GraphQL: Only what you need
const query = `{ user(id: "1") { name email } }`;
const response = await fetch('/graphql', {
  method: 'POST',
  body: JSON.stringify({ query }),
});
const { data } = await response.json();
// Returns: { user: { name: "Alice", email: "alice@example.com" } }

# Python: Compare REST vs GraphQL response sizes
import requests

# REST response (always full)
rest_resp = requests.get('https://api.example.com/api/users/1')
rest_size = len(rest_resp.content)
print(f'REST response: {rest_size} bytes')

# GraphQL response (only requested fields)
gql_query = '{ user(id: "1") { name email } }'
gql_resp = requests.post('https://api.example.com/graphql', json={'query': gql_query})
gql_size = len(gql_resp.content)
print(f'GraphQL response: {gql_size} bytes')
print(f'Saved: {rest_size - gql_size} bytes ({((rest_size - gql_size) / rest_size) * 100:.0f}%)')

Common Mistakes

1. Requesting Nested Fields That Are Not Needed

Each nested field adds database queries. Only request what you display.

2. Using GraphQL Fragments for a Single Field

Fragments are for reuse, not for reducing query size on a single usage.

3. Forgetting That Over-Fetching Still Happens at the Resolver Level

Resolvers may still fetch full objects from the database. Use DataLoader for efficiency.

4. Requesting the Same Field Multiple Times

GraphQL deduplicates fields in the response, but the query text is larger.

5. Not Using GraphQL for Small, Fixed Payloads

For endpoints that always return the same data, REST may be simpler.

Practice Questions

1. What is over-fetching in REST APIs?
2. How does GraphQL prevent over-fetching?
3. What tool compares REST and GraphQL response sizes?
4. Can over-fetching still happen in GraphQL resolvers?
5. When is REST better than GraphQL despite over-fetching?

Answers:

1. When an API returns more data than the client needs.
2. Clients specify exact fields in the query; only those fields are returned.
3. Browser dev tools network tab or curl with size comparison.
4. Yes, if resolvers fetch full objects from the database without field-aware optimization.
5. For simple, fixed endpoints or when Caching at the HTTP level is critical.

Challenge: Profile a REST API endpoint and identify over-fetched fields. Create a GraphQL equivalent that reduces payload by at least 50%. Measure and compare response sizes.

FAQ

Mini Project

Build a comparison tool that queries a REST endpoint and a GraphQL endpoint for the same data, measures response sizes, and reports the difference. Include a detailed breakdown of which fields are over-fetched in REST.

What's Next

Learn about GraphQL under-fetching and how it solves the N+1 Problem, then explore GraphQL SDL for schema definition.