GraphQL vs REST comparison - Visual Side-by-Side Comparison

Concept Flow - GraphQL vs REST comparison

Client sends request

↓

REST: Fixed endpoints

↓

Server returns fixed data

↓

Client may need multiple requests

↓

Client sends request

↓

GraphQL: Single endpoint

↓

Client specifies data shape

↓

Server returns exactly requested data

Shows how REST uses fixed endpoints returning fixed data, often requiring multiple requests, while GraphQL uses a single endpoint where client specifies exactly what data it wants.

Execution Sample

GraphQL

query {
  user(id: "1") {
    name
    posts {
      title
    }
  }
}

GraphQL query requesting a user's name and their posts' titles in one request.

Execution Table

Step	Request Type	Endpoint	Data Requested	Server Response	Notes
1	REST	/users/1	User data	{"id": "1", "name": "Alice", "email": "[e-mail]"}	Fixed data, includes email not needed
2	REST	/users/1/posts	User's posts	[{"id": "101", "title": "Hello World"}, {"id": "102", "title": "GraphQL Intro"}]	Separate request for posts
3	GraphQL	/graphql	{ user(id: "1") { name posts { title } } }	{"data": {"user": {"name": "Alice", "posts": [{"title": "Hello World"}, {"title": "GraphQL Intro"}]}}}	Single request, exact data
4	GraphQL	/graphql	{ user(id: "1") { name } }	{"data": {"user": {"name": "Alice"}}}	Single request, less data
5	REST	/users/1	User data	{"id": "1", "name": "Alice", "email": "[e-mail]"}	No way to limit fields in REST
6	REST	/users/1/posts	User's posts	[{"id": "101", "title": "Hello World"}, {"id": "102", "title": "GraphQL Intro"}]	Multiple requests needed
7	End	-	-	-	Requests complete

💡 All needed data retrieved; REST requires multiple requests, GraphQL uses one with precise data.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
REST_UserData	null	{"id": "1", "name": "Alice", "email": "[e-mail]"}	{"id": "1", "name": "Alice", "email": "[e-mail]"}	{"id": "1", "name": "Alice", "email": "[e-mail]"}	{"id": "1", "name": "Alice", "email": "[e-mail]"}	{"id": "1", "name": "Alice", "email": "[e-mail]"}
REST_UserPosts	null	null	[{"id": "101", "title": "Hello World"}, {"id": "102", "title": "GraphQL Intro"}]	[{"id": "101", "title": "Hello World"}, {"id": "102", "title": "GraphQL Intro"}]	[{"id": "101", "title": "Hello World"}, {"id": "102", "title": "GraphQL Intro"}]	[{"id": "101", "title": "Hello World"}, {"id": "102", "title": "GraphQL Intro"}]
GraphQL_Response	null	null	null	{"data": {"user": {"name": "Alice", "posts": [{"title": "Hello World"}, {"title": "GraphQL Intro"}]}}}	{"data": {"user": {"name": "Alice"}}}	{"data": {"user": {"name": "Alice", "posts": [{"title": "Hello World"}, {"title": "GraphQL Intro"}]}}}

Key Moments - 3 Insights

Why does REST require multiple requests to get user and posts data?

REST endpoints return fixed data per URL. To get user info and posts, separate URLs must be called (see execution_table rows 1 and 2).

How does GraphQL return exactly the data requested?

GraphQL queries specify fields needed. Server returns only those fields in one response (see execution_table row 3).

Can REST limit fields returned in a response like GraphQL?

No, REST endpoints usually return fixed fields. To limit fields, APIs must support query parameters, which is not standard (see execution_table rows 1 and 5).

Visual Quiz - 3 Questions

Look at the execution_table, at which step does GraphQL return both user name and posts in one response?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Check the 'Server Response' column for GraphQL requests in execution_table rows.

According to variable_tracker, what is the value of REST_UserPosts after Step 2?

A [{"id": "101", "title": "Hello World"}, {"id": "102", "title": "GraphQL Intro"}]

B null

C User data JSON

D Empty array

💡 Hint

Look at REST_UserPosts row and After Step 2 column in variable_tracker.

If the GraphQL query in Step 4 requested posts titles only, what would the server response include?

A User name and posts titles

B User name only

C Posts titles only

D User email and posts titles

💡 Hint

GraphQL returns exactly requested fields as shown in execution_table rows 3 and 4.

Concept Snapshot

GraphQL vs REST:
- REST uses multiple fixed endpoints.
- REST returns fixed data per endpoint.
- GraphQL uses single endpoint.
- Client specifies exact data shape in GraphQL.
- GraphQL reduces multiple requests to one.
- REST may over-fetch or under-fetch data.

Full Transcript

This visual compares GraphQL and REST by showing how each handles data requests. REST uses fixed URLs returning fixed data, often requiring multiple requests to get related data like user info and posts. GraphQL uses a single endpoint where the client specifies exactly what data it wants, returning only that data in one response. The execution table traces requests and responses step-by-step, showing REST needing two requests for user and posts, while GraphQL gets both in one. The variable tracker shows how data variables change after each step. Key moments clarify why REST requires multiple calls and how GraphQL returns precise data. The quiz tests understanding of these differences by referencing the tables. The snapshot summarizes the main points for quick recall.

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