Why GraphQL exists - Visual Breakdown

Concept Flow - Why GraphQL exists

Client requests data

↓

Traditional REST API

↓

Multiple endpoints, over-fetching or under-fetching

↓

Problems: Slow, inefficient, rigid

↓

GraphQL introduced

↓

Single endpoint, client specifies exactly what data needed

↓

Efficient, flexible data fetching

↓

Better developer experience and performance

Shows how GraphQL solves problems of REST APIs by letting clients ask for exactly the data they want from a single endpoint.

Execution Sample

GraphQL

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

Client asks GraphQL server for user name and titles of their posts in one request.

Execution Table

Step	Action	Request Part	Server Response Part	Result
1	Receive query	user(id: "1")	Fetch user with id 1	User data loaded
2	Resolve fields	name	User's name	Include name in response
3	Resolve nested fields	posts { title }	Fetch posts for user	Include posts titles in response
4	Build response	All requested fields	Construct JSON with name and posts titles	Send response to client
5	Client receives	Response JSON	User name and posts titles	Client has exactly requested data

💡 All requested fields resolved and response sent; query complete

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
userData	null	{id:1}	{id:1, name:"Alice"}	{id:1, name:"Alice", posts:[{title:"Post1"},{title:"Post2"}]}	{id:1, name:"Alice", posts:[{title:"Post1"},{title:"Post2"}]}	{id:1, name:"Alice", posts:[{title:"Post1"},{title:"Post2"}]}

Key Moments - 2 Insights

Why does GraphQL use a single endpoint instead of multiple like REST?

GraphQL uses a single endpoint to let clients specify exactly what data they want in one request, avoiding multiple calls and reducing over-fetching, as shown in execution_table steps 1 and 4.

How does GraphQL avoid over-fetching or under-fetching data?

Clients specify the exact fields they need in the query (execution_sample), so the server only returns requested data (execution_table steps 2 and 3), preventing extra or missing data.

Visual Quiz - 3 Questions

Look at the execution_table, what does the server do at step 3?

A Fetch user name

B Fetch posts for user

C Send response to client

D Receive query

💡 Hint

Check the 'Action' and 'Request Part' columns in row 3 of execution_table

At which step does the client receive the exact data it requested?

A Step 5

B Step 2

C Step 4

D Step 3

💡 Hint

Look at the 'Result' column for when data is sent to client in execution_table

If the client requested an extra field, how would the variable_tracker change?

A userData would lose existing fields

B userData would remain unchanged

C userData would include the extra field after step 3

D userData would be null

💡 Hint

Refer to how userData grows with requested fields in variable_tracker

Concept Snapshot

GraphQL exists to solve REST API problems.
It uses a single endpoint.
Clients specify exactly what data they want.
Server returns only requested data.
This avoids over-fetching and under-fetching.
Improves efficiency and developer experience.

Full Transcript

GraphQL was created because traditional REST APIs often require multiple endpoints and can send too much or too little data. This makes apps slower and less efficient. GraphQL uses a single endpoint where clients send a query specifying exactly what data they want. The server then fetches and returns only that data. This process reduces unnecessary data transfer and improves performance. The execution steps show how the server receives the query, resolves requested fields including nested ones, builds the response, and sends it back. Variables like userData grow as fields are resolved. This approach gives clients flexibility and efficiency in data fetching.

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