Why GraphQL exists - See It in Action

Understanding Why GraphQL Exists

📖 Scenario: Imagine you are building a website that shows user profiles and their posts. You want to get just the right data from the server without asking for too much or too little.

🎯 Goal: Learn why GraphQL was created by building a simple query that fetches exactly the data needed for a user profile and their posts.

📋 What You'll Learn

Create a GraphQL schema with types for User and Post

Add fields to User for id, name, and posts

Add fields to Post for id and title

Write a GraphQL query to fetch a user by id with their name and titles of posts

💡 Why This Matters

🌍 Real World

GraphQL is used in modern web and mobile apps to efficiently fetch data from servers, improving performance and developer experience.

💼 Career

Understanding why GraphQL exists helps developers design better APIs and work effectively with frontend and backend teams.

1

Create GraphQL types for User and Post

Write a GraphQL schema defining a User type with fields id (ID!), name (String!), and posts (list of Post). Also define a Post type with fields id (ID!) and title (String!).

GraphQL

# Define User and Post types in GraphQL schema
# Your code here

Need a hint?

Use type keyword to define types. Use ! to mark fields as required.

2

Add a Query type to fetch a user by id

Add a Query type with a field user that takes an argument id of type ID! and returns a User.

GraphQL

type User {
  id: ID!
  name: String!
  posts: [Post]
}

type Post {
  id: ID!
  title: String!
}

# Add Query type with user(id: ID!): User
# Your code here

Need a hint?

The Query type is the entry point for fetching data. Define a field with an argument and return type.

3

Write a GraphQL query to get user name and post titles

Write a GraphQL query named GetUser that fetches a user by id with fields name and posts (only title field).

GraphQL

type User {
  id: ID!
  name: String!
  posts: [Post]
}

type Post {
  id: ID!
  title: String!
}

type Query {
  user(id: ID!): User
}

# Write a query named GetUser to fetch user by id with name and posts' titles
# Your code here

Need a hint?

Use query keyword with a variable $id. Select only the needed fields.

4

Explain how this query shows why GraphQL exists

Add a comment explaining that this query fetches exactly the data needed (user name and post titles) in one request, avoiding over-fetching or under-fetching data.

GraphQL

type User {
  id: ID!
  name: String!
  posts: [Post]
}

type Post {
  id: ID!
  title: String!
}

type Query {
  user(id: ID!): User
}

query GetUser($id: ID!) {
  user(id: $id) {
    name
    posts {
      title
    }
  }
}

# Add a comment explaining why GraphQL helps avoid over-fetching and under-fetching
# Your code here

Need a hint?

Explain in a comment how GraphQL solves common problems of REST APIs by letting clients specify exactly what data they want.