Over-fetching and under-fetching problems in GraphQL - Mini Project: Build & Apply

Solving Over-fetching and Under-fetching Problems in GraphQL

📖 Scenario: You are building a simple social media app backend using GraphQL. Users have profiles with posts and comments. You want to fetch only the data needed for a user profile page without extra or missing information.

🎯 Goal: Build a GraphQL query step-by-step that fetches exactly the user's id, name, and their posts with only the title and comments count, avoiding over-fetching and under-fetching.

📋 What You'll Learn

Create a GraphQL query to fetch user data

Add a variable to select the user by id

Fetch only the user's id and name

Fetch the user's posts with only title and number of comments

Avoid fetching unnecessary fields (no over-fetching)

Ensure all needed fields for the profile page are included (no under-fetching)

💡 Why This Matters

🌍 Real World

GraphQL queries are used in modern web and mobile apps to fetch exactly the data needed, improving performance and user experience.

💼 Career

Understanding how to avoid over-fetching and under-fetching is essential for backend and frontend developers working with GraphQL APIs.

1

Create the base GraphQL query structure

Write a GraphQL query named GetUserProfile that takes a variable $userId of type ID! and fetches the user by id. Fetch only the user's id and name fields inside the query.

GraphQL

query GetUserProfile($userId: ID!) {
  user(id: $userId) {
    # Your code here
  }
}

Need a hint?

Start by defining the query with a variable $userId and fetch the user fields id and name.

2

Add fetching of user's posts with limited fields

Inside the user field, add fetching of posts. For each post, fetch only the title field.

GraphQL

query GetUserProfile($userId: ID!) {
  user(id: $userId) {
    id
    name
    # Your code here
  }
}

Need a hint?

Add the posts field inside user and fetch only the title for each post.

3

Add comment count for each post to avoid under-fetching

Inside each post, add fetching of the number of comments using the commentsCount field to avoid under-fetching data needed for the profile page.

GraphQL

query GetUserProfile($userId: ID!) {
  user(id: $userId) {
    id
    name
    posts {
      title
      # Your code here
    }
  }
}

Need a hint?

Fetch the commentsCount field inside each post to get the number of comments.

4

Complete the query ensuring no over-fetching or under-fetching

Review the query and add any missing closing braces to complete the GraphQL query named GetUserProfile that fetches id, name, and posts with title and commentsCount fields.

GraphQL

query GetUserProfile($userId: ID!) {
  user(id: $userId) {
    id
    name
    posts {
      title
      commentsCount
    }
  }
  # Your code here
}

Need a hint?

Make sure all braces are closed properly to complete the query.