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

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

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

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

Hint

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

Practice

1. Why was GraphQL created as a new way to request data from APIs?

easy

A. To force clients to download all data every time.

B. To make APIs slower and more complex.

C. To let clients ask for exactly the data they need, no more, no less.

D. To replace databases with a new storage system.

Solution

1. Step 1: Understand the problem GraphQL solves

   Traditional APIs often send too much or too little data, causing inefficiency.

2. Step 2: Identify GraphQL's main benefit

   GraphQL allows clients to specify exactly what data they want, improving efficiency.

3. Final Answer:

   To let clients ask for exactly the data they need, no more, no less. -> Option C

4. Quick Check:

   GraphQL = precise data requests [OK]

Hint: GraphQL lets you ask only for what you need [OK]

Common Mistakes:

• Thinking GraphQL makes APIs slower
• Believing GraphQL replaces databases
• Assuming GraphQL sends all data always

2. Which of the following is the correct way to request a user's name and email in GraphQL?

easy

A. query { user name email }

B. query { user { name, email } }

C. query user { name, email }

D. query { user: name, email }

Solution

1. Step 1: Recall GraphQL query syntax

   GraphQL queries use curly braces to specify fields inside objects.

2. Step 2: Check each option's syntax

   query { user { name, email } } correctly nests fields inside user with commas separating fields.

3. Final Answer:

   query { user { name, email } } -> Option B

4. Quick Check:

   Correct GraphQL query syntax = query { user { name, email } } [OK]

Hint: Fields inside braces, separated by commas [OK]

Common Mistakes:

• Missing braces around nested fields
• Using colons incorrectly in queries
• Omitting commas between fields

3. Given this GraphQL query:
query { book(id: "1") { title author { name } } }
What data will the client receive?

medium

A. { "book": { "title": "1984", "author": { "name": "George Orwell" } } }

B. { "book": { "title": "1984" } }

C. { "title": "1984", "author": "George Orwell" }

D. { "book": { "name": "George Orwell" } }

Solution

1. Step 1: Analyze the query fields

   The query asks for book with id "1", requesting title and nested author name.

2. Step 2: Match query fields to response structure

   The response includes book object with title and author object containing name.

3. Final Answer:

   { "book": { "title": "1984", "author": { "name": "George Orwell" } } } -> Option A

4. Quick Check:

   Nested fields return nested objects [OK]

Hint: Nested fields return nested objects in response [OK]

Common Mistakes:

• Expecting flat objects for nested fields
• Missing nested author object
• Ignoring requested fields in response

4. This GraphQL query has an error:
query { user { name, email } }
Which is the most likely cause?

medium

A. The query is missing a closing brace.

B. GraphQL queries cannot have commas between fields.

C. Fields 'name' and 'email' cannot be requested together.

D. The server schema does not have a 'user' field.

Solution

1. Step 1: Check query syntax

   The query syntax is correct with braces and commas properly placed.

2. Step 2: Consider schema compatibility

   If the server schema lacks 'user' field, the query will fail despite correct syntax.

3. Final Answer:

   The server schema does not have a 'user' field. -> Option D

4. Quick Check:

   Schema mismatch causes query errors [OK]

Hint: Check if fields exist in server schema [OK]

Common Mistakes:

• Assuming syntax error when schema is missing fields
• Thinking commas are not allowed between fields
• Believing fields cannot be requested together

5. A client wants to fetch a list of products with only their names and prices to improve app speed. Which GraphQL feature helps achieve this?

hard

A. Requesting only specific fields in the query to reduce data transfer.

B. Using mutations to update product data.

C. Fetching all product details and filtering on the client side.

D. Using subscriptions to get real-time updates.

Solution

1. Step 1: Understand the client's goal

   The client wants to improve speed by reducing unnecessary data.

2. Step 2: Identify GraphQL feature that fits

   GraphQL allows requesting only needed fields, minimizing data sent over network.

3. Final Answer:

   Requesting only specific fields in the query to reduce data transfer. -> Option A

4. Quick Check:

   Selective field requests improve performance [OK]

Hint: Ask only for needed fields to speed up apps [OK]

Common Mistakes:

• Confusing queries with mutations
• Fetching all data then filtering client-side
• Using subscriptions when not needed