Over-fetching and under-fetching problems in GraphQL - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch only the user's name in a GraphQL query.

GraphQL

query { user { [1] } }

Drag options to blanks, or click blank then click option'

Aemail

Bname

Cid

Dposts

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'posts' fetches too much data, causing over-fetching.

Choosing 'email' or 'id' fetches different data than the name.

The field name fetches only the user's name, avoiding over-fetching extra data.

2fill in blank

medium

Complete the code to fetch a user's posts with only the post titles.

GraphQL

query { user { posts { [1] } } }

Drag options to blanks, or click blank then click option'

Atitle

Bauthor

Ccontent

Ddate

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'content' fetches the full post text, causing over-fetching.

Choosing 'author' or 'date' fetches unrelated data.

Fetching only the title of posts avoids over-fetching unnecessary post details.

3fill in blank

hard

Fix the error in the query to avoid under-fetching user email.

GraphQL

query { user { name [1] } }

Drag options to blanks, or click blank then click option'

Aemail

Bposts

C}

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing '}' fetches only name, still under-fetching email.

Choosing 'posts' fetches extra data, causing over-fetching.

Choosing 'id' fetches id instead of email.

Adding the email field fetches the user's email along with name, avoiding under-fetching.

4fill in blank

hard

Fill both blanks to fetch user's name and email without over-fetching.

GraphQL

query { user { [1] [2] } }

Drag options to blanks, or click blank then click option'

Aname

Bposts

Cemail

Dcomments

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'posts' or 'comments' fetches too much data.

Missing either 'name' or 'email' causes under-fetching.

Fetching name and email gets only needed user info, avoiding over-fetching posts or comments.

5fill in blank

hard

Fill all three blanks to fetch post title, author name, and post date without extra data.

GraphQL

query { post { [1] author { [2] } [3] } }

Drag options to blanks, or click blank then click option'

Atitle

Bname

Cdate

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing 'content' fetches too much data.

Missing any of the three fields causes under-fetching.

Fetching title, author name, and date gets essential post info without over-fetching full content.

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