GraphQL vs REST comparison - Hands-On Comparison

Build a Simple GraphQL API to Compare GraphQL and REST

📖 Scenario: You are creating a small API to share information about the differences between GraphQL and REST. This API will help developers understand key points by querying the data.

🎯 Goal: Build a GraphQL schema with data about GraphQL and REST comparison, then write queries to fetch this data step-by-step.

📋 What You'll Learn

Create a GraphQL type called ComparisonPoint with fields id, topic, and description

Create a list of ComparisonPoint items with exact comparison data

Add a query type comparisonPoints that returns the list

Write a GraphQL query to fetch all comparison points with their topic and description

💡 Why This Matters

🌍 Real World

APIs often need to explain or document differences between technologies. This project shows how to build a simple GraphQL API to share such information.

💼 Career

Understanding GraphQL schema design, resolvers, and queries is essential for backend developers working with modern APIs.

1

Define the ComparisonPoint type and initial data

Create a GraphQL type called ComparisonPoint with fields id (ID!), topic (String!), and description (String!). Then create a list called comparisonPoints with these exact entries: { id: "1", topic: "Data Fetching", description: "GraphQL fetches exactly what you ask for, REST returns fixed data." } and { id: "2", topic: "Endpoints", description: "GraphQL uses a single endpoint, REST uses multiple endpoints." }.

GraphQL

# Define the ComparisonPoint type and create the comparisonPoints list
# Your code here

Hint

Define the type with three fields and create an array with two objects exactly as shown.

2

Add the Query type with comparisonPoints field

Add a GraphQL type Query with a field comparisonPoints that returns a list of ComparisonPoint. Then add a resolver function called comparisonPoints that returns the comparisonPoints list.

GraphQL

type ComparisonPoint {
  id: ID!
  topic: String!
  description: String!
}

const comparisonPoints = [
  { id: "1", topic: "Data Fetching", description: "GraphQL fetches exactly what you ask for, REST returns fixed data." },
  { id: "2", topic: "Endpoints", description: "GraphQL uses a single endpoint, REST uses multiple endpoints." }
];

# Add the Query type and resolver for comparisonPoints
# Your code here

Hint

Define the Query type with a field returning a list of ComparisonPoint. Then write a resolver returning the data list.

3

Write a GraphQL query to fetch all comparison points

Write a GraphQL query named GetComparisonPoints that fetches the topic and description fields from comparisonPoints.

GraphQL

type ComparisonPoint {
  id: ID!
  topic: String!
  description: String!
}

type Query {
  comparisonPoints: [ComparisonPoint!]!
}

const comparisonPoints = [
  { id: "1", topic: "Data Fetching", description: "GraphQL fetches exactly what you ask for, REST returns fixed data." },
  { id: "2", topic: "Endpoints", description: "GraphQL uses a single endpoint, REST uses multiple endpoints." }
];

const resolvers = {
  Query: {
    comparisonPoints: () => comparisonPoints
  }
};

# Write the GraphQL query named GetComparisonPoints
# Your code here

Hint

Write a query named GetComparisonPoints that requests topic and description fields from comparisonPoints.

4

Complete the GraphQL schema export

Export the GraphQL schema by combining the type definitions and resolvers. Use makeExecutableSchema from @graphql-tools/schema with typeDefs and resolvers.

GraphQL

type ComparisonPoint {
  id: ID!
  topic: String!
  description: String!
}

type Query {
  comparisonPoints: [ComparisonPoint!]!
}

const comparisonPoints = [
  { id: "1", topic: "Data Fetching", description: "GraphQL fetches exactly what you ask for, REST returns fixed data." },
  { id: "2", topic: "Endpoints", description: "GraphQL uses a single endpoint, REST uses multiple endpoints." }
];

const resolvers = {
  Query: {
    comparisonPoints: () => comparisonPoints
  }
};

query GetComparisonPoints {
  comparisonPoints {
    topic
    description
  }
}

# Export the schema using makeExecutableSchema with typeDefs and resolvers
# Your code here

Hint

Use makeExecutableSchema with typeDefs and resolvers, then export the schema as default.

Practice

1. What is a key advantage of GraphQL compared to REST when fetching data?

easy

A. GraphQL does not support querying nested data.

B. GraphQL requires multiple URLs for different data resources.

C. GraphQL uses fixed data shapes for each resource.

D. GraphQL allows fetching exactly the data you want in a single request.

Solution

1. Step 1: Understand GraphQL data fetching

   GraphQL lets clients specify exactly what data they want in one request, avoiding over-fetching or under-fetching.

2. Step 2: Compare with REST approach

   REST typically requires multiple URLs and fixed data shapes, which can lead to multiple requests or extra data.

3. Final Answer:

   GraphQL allows fetching exactly the data you want in a single request. -> Option D

4. Quick Check:

   GraphQL = precise single-request data fetching [OK]

Hint: GraphQL = one request, exact data [OK]

Common Mistakes:

• Thinking GraphQL needs multiple URLs
• Believing GraphQL returns fixed data shapes
• Assuming GraphQL can't query nested data

2. Which of the following is the correct way to define a GraphQL query to get a user's name and email?

easy

A. { user: { name, email } }

B. query { user { name, email } }

C. SELECT name, email FROM user

D. GET /user/name,email

Solution

1. Step 1: Identify GraphQL query syntax

   GraphQL queries start with the keyword 'query' followed by the requested fields inside braces.

2. Step 2: Check each option

   query { user { name, email } } matches GraphQL syntax. GET /user/name,email is REST style URL. SELECT name, email FROM user is SQL. { user: { name, email } } is invalid JSON-like structure.

3. Final Answer:

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

4. Quick Check:

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

Hint: GraphQL queries start with 'query' keyword [OK]

Common Mistakes:

• Using REST or SQL syntax instead of GraphQL
• Omitting the 'query' keyword
• Incorrect braces placement

3. Given this GraphQL query:

query { book(id: "1") { title author { name } } }

What data structure will the response most likely contain?

medium

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

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

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

D. {"data": {"book": {"title": "1984", "author": ["George Orwell"]}}}

Solution

1. Step 1: Understand GraphQL response format

   GraphQL responses wrap data inside a 'data' object, matching the query structure exactly.

2. Step 2: Match nested fields

   The query requests 'book' with 'title' and nested 'author' with 'name', so response must reflect nested objects.

3. Final Answer:

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

4. Quick Check:

   GraphQL response = nested 'data' object [OK]

Hint: GraphQL responses wrap data inside 'data' key [OK]

Common Mistakes:

• Omitting the 'data' wrapper
• Flattening nested objects incorrectly
• Using arrays for single nested objects

4. Identify the error in this GraphQL query:

query { user(id: 5) { name, email } }

medium

A. The query keyword is missing.

B. The fields 'name' and 'email' should be inside parentheses.

C. The id value should be a string, so it needs quotes.

D. GraphQL does not support querying users by id.

Solution

1. Step 1: Check argument types in GraphQL

   GraphQL requires string arguments to be quoted. Here, id is likely a string and should be "5".

2. Step 2: Verify field syntax

   Fields 'name' and 'email' are correctly listed with commas, no parentheses needed.

3. Final Answer:

   The id value should be a string, so it needs quotes. -> Option C

4. Quick Check:

   String arguments need quotes in GraphQL [OK]

Hint: Quote string arguments in GraphQL queries [OK]

Common Mistakes:

• Leaving string arguments unquoted
• Adding parentheses around fields
• Assuming query keyword is optional

5. You want to design an API for a mobile app that needs flexible data fetching with minimal requests and efficient caching. Which approach is best and why?

hard

A. Use GraphQL because it allows clients to request exactly what they need in one request.

B. Use REST because it is simpler and caches well with fixed URLs.

C. Use REST because it supports nested queries better than GraphQL.

D. Use GraphQL because it requires multiple requests for different data.

Solution

1. Step 1: Analyze requirements for flexible data fetching and minimal requests

   GraphQL excels at letting clients specify exactly what data they want, reducing multiple requests.

2. Step 2: Consider caching and efficiency

   While REST is simpler and caches well, GraphQL's single-request flexibility suits mobile apps needing efficient data transfer.

3. Final Answer:

   Use GraphQL because it allows clients to request exactly what they need in one request. -> Option A

4. Quick Check:

   Flexible, minimal requests = GraphQL [OK]

Hint: Flexible single-request fetching = GraphQL [OK]

Common Mistakes:

• Choosing REST for flexibility over GraphQL
• Thinking GraphQL needs multiple requests
• Assuming REST handles nested queries better