Over-fetching and under-fetching problems in GraphQL - Step-by-Step Execution

Concept Flow - Over-fetching and under-fetching problems

Client sends query

↓

Server receives query

↓

Server fetches data

↓

Fetch too much data?

Yes→Over-fetching problem

↓

Extra data sent

↓

Fetch too little data?

Yes→Under-fetching problem

↓

Missing data, client needs more queries

↓

Server sends response

↓

Client receives data

Client sends a query, server fetches data. If server fetches more than needed, it's over-fetching. If less, it's under-fetching, causing extra queries.

Execution Sample

GraphQL

query {
  user(id: 1) {
    id
    name
    posts {
      id
      title
    }
  }
}

Client requests user info with posts; server fetches user and posts data accordingly.

Execution Table

Step	Action	Data Requested	Data Fetched	Problem Detected	Result Sent
1	Client sends query	User id, name, posts (id, title)	N/A	N/A	N/A
2	Server processes query	User id, name, posts (id, title)	User id, name, posts (id, title, content)	Over-fetching	User id, name, posts (id, title, content)
3	Client receives data	User id, name, posts (id, title)	User id, name, posts (id, title, content)	Over-fetching	User id, name, posts (id, title, content)
4	Client sends query	User id, name	N/A	N/A	N/A
5	Server processes query	User id, name	User id	Under-fetching	User id
6	Client receives data	User id, name	User id	Under-fetching	User id
7	Client sends extra query for name	User name	User name	N/A	User name
8	Client receives extra data	User name	User name	N/A	User name

💡 Execution stops after client receives all requested data, possibly after multiple queries if under-fetching occurs.

Variable Tracker

Variable	Start	After Step 2	After Step 5	After Step 7	Final
Data Fetched	None	User id, name, posts (id, title, content)	User id	User id, name	User id, name, posts (id, title, content)

Key Moments - 2 Insights

Why does the server sometimes send more data than the client asked for?

Because the server fetches extra fields (like 'content' in posts) not requested, causing over-fetching as shown in step 2 and 3 of the execution_table.

Why does the client need to send multiple queries sometimes?

When the server fetches less data than requested (under-fetching), the client must send extra queries to get missing fields, as seen in steps 5 to 8.

Visual Quiz - 3 Questions

Look at the execution_table at step 2. What problem is detected?

A Under-fetching

B Over-fetching

C No problem

D Syntax error

💡 Hint

Check the 'Problem Detected' column at step 2 in the execution_table.

At which step does the client send an extra query due to under-fetching?

A Step 3

B Step 5

C Step 7

D Step 1

💡 Hint

Look for the step where the client sends an extra query after receiving incomplete data.

If the server fetched exactly the requested fields, how would the 'Data Fetched' value at step 2 change?

A It would match the requested fields exactly

B It would be empty

C It would include extra fields

D It would cause an error

💡 Hint

Compare 'Data Requested' and 'Data Fetched' columns at step 2 in the execution_table.

Concept Snapshot

Over-fetching: Server sends more data than client needs, wasting resources.
Under-fetching: Server sends less data, client must ask again.
GraphQL queries specify exactly what data is needed.
Proper server response avoids both problems.
Helps efficient data transfer and fewer requests.

Full Transcript

This visual execution shows how over-fetching and under-fetching happen in GraphQL. The client sends a query requesting specific fields. The server fetches data. If the server fetches extra fields not requested, it causes over-fetching, sending unnecessary data. If the server fetches fewer fields than requested, it causes under-fetching, forcing the client to send extra queries to get missing data. The execution table traces these steps, showing actions, data requested, data fetched, problems detected, and results sent. Variable tracking shows how fetched data changes over steps. Key moments clarify why extra data or extra queries happen. The quiz tests understanding of these steps. The snapshot summarizes the concept for quick review.

Practice

1. What does over-fetching mean in GraphQL?

easy

A. Getting more data than the client actually needs

B. Getting less data than the client actually needs

C. Getting exactly the data the client requests

D. Getting data from multiple sources at once

Solution

1. Step 1: Understand the term over-fetching

   Over-fetching means the client receives more data than it requires, which can slow down the app.

2. Step 2: Compare with other options

   Under-fetching is the opposite (less data), exact fetching matches needs, and multiple sources is unrelated.

3. Final Answer:

   Getting more data than the client actually needs -> Option A

4. Quick Check:

   Over-fetching = More data than needed [OK]

Hint: Over-fetching means extra data beyond need [OK]

Common Mistakes:

• Confusing over-fetching with under-fetching
• Thinking over-fetching means exact data
• Mixing up data sources with data amount

2. Which GraphQL query syntax correctly avoids over-fetching by requesting only the user's name and email?

easy

A. { user { id name email } }

B. { user { name email posts } }

C. { user { name email } }

D. { user { id posts comments } }

Solution

1. Step 1: Identify requested fields

   { user { name email } } requests only name and email, exactly what is needed.

2. Step 2: Check other options for extra fields

   { user { id name email } } includes id (extra), B and D include posts and comments (extra data).

3. Final Answer:

   { user { name email } } -> Option C

4. Quick Check:

   Request only needed fields = { user { name email } } [OK]

Hint: Pick query with only needed fields, no extras [OK]

Common Mistakes:

• Including extra fields causing over-fetching
• Missing required fields causing under-fetching
• Confusing field names or nesting

3. Given this GraphQL query:

{ user { name posts { title } } }

What problem might this query cause if the client only needs the user's name?

medium

A. No problem, it fetches exactly what is needed

B. Under-fetching, missing the posts data

C. Syntax error due to missing fields

D. Over-fetching, fetching unnecessary posts data

Solution

1. Step 1: Analyze the query fields

   The query requests name and posts { title }, which includes posts data.

2. Step 2: Compare with client needs

   The client only needs name, so fetching posts is extra data causing over-fetching.

3. Final Answer:

   Over-fetching, fetching unnecessary posts data -> Option D

4. Quick Check:

   Extra fields cause over-fetching = Over-fetching, fetching unnecessary posts data [OK]

Hint: Check if query requests more than needed fields [OK]

Common Mistakes:

• Thinking missing posts is under-fetching
• Assuming no problem if query runs
• Confusing syntax errors with data issues

4. Identify the error in this GraphQL query that causes under-fetching:

{ user { name } }

The client needs the user's name and email.

medium

A. The query is missing the email field

B. The query has a syntax error in braces

C. The query requests too many fields

D. The query uses incorrect field names

Solution

1. Step 1: Check requested fields

   The query requests only name, missing email.

2. Step 2: Compare with client needs

   The client needs both name and email, so missing email causes under-fetching.

3. Final Answer:

   The query is missing the email field -> Option A

4. Quick Check:

   Missing needed fields = under-fetching [OK]

Hint: Check if all needed fields are requested [OK]

Common Mistakes:

• Assuming syntax error when none exists
• Thinking too many fields cause under-fetching
• Ignoring missing fields as a problem

5. You have a GraphQL query fetching a list of users with their posts and comments:

{ users { id name posts { title comments { text } } } }

To avoid over-fetching when the client only needs user names and post titles, how should you modify the query?

hard

A. { users { id name posts { title comments { text } } } }

B. { users { name posts { title } } }

C. { users { name posts { comments { text } } } }

D. { users { posts { title } } }

Solution

1. Step 1: Identify needed fields

   The client needs only name and post titles, no id or comments.

2. Step 2: Modify query to include only needed fields

   { users { name posts { title } } } requests name and posts { title }, exactly matching needs without extra data.

3. Final Answer:

   { users { name posts { title } } } -> Option B

4. Quick Check:

   Remove unneeded fields to avoid over-fetching [OK]

Hint: Keep only fields client needs, remove nested extras [OK]

Common Mistakes:

• Leaving comments in query causing over-fetching
• Removing needed fields like user name
• Removing posts entirely causing under-fetching