REST vs GraphQL awareness in Express - Visual Side-by-Side Comparison

Concept Flow - REST vs GraphQL awareness

Client sends request

↓

REST API Endpoint

↓

Server processes

↓

Send fixed data

↓

Client receives

Shows how client requests go to REST or GraphQL endpoints, and how servers respond with fixed or flexible data.

Execution Sample

Express

const express = require('express');
const app = express();

// REST endpoint
app.get('/users', (req, res) => {
  res.json([{ id: 1, name: 'Alice' }]);
});

A simple REST endpoint that returns a fixed list of users.

Execution Table

Step	Request Type	Endpoint	Server Action	Response Sent
1	GET	/users	Return full user list	[{ id: 1, name: 'Alice' }]
2	POST	/graphql	Parse query, resolve fields	{ data: { user: { id: 1, name: 'Alice' } } }
3	GET	/users?id=1	Return full user list (no filtering)	[{ id: 1, name: 'Alice' }]
4	POST	/graphql	Parse query, resolve only requested fields	{ data: { user: { name: 'Alice' } } }
5	N/A	N/A	No more requests	End of trace

💡 No more requests to process, execution ends.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 4	Final
requestType	N/A	GET	POST	POST	N/A
endpoint	N/A	/users	/graphql	/graphql	N/A
responseData	N/A	[{ id: 1, name: 'Alice' }]	{ data: { user: { id: 1, name: 'Alice' } } }	{ data: { user: { name: 'Alice' } } }	N/A

Key Moments - 2 Insights

Why does the REST endpoint always return the full user data even if I want only the name?

REST endpoints return fixed data shapes defined by the server, so filtering fields requires extra endpoints or query parameters. See execution_table step 1 and 3 where full user data is returned.

How does GraphQL return only the requested fields?

GraphQL parses the query to know exactly which fields the client wants, then resolves and sends only those fields. See execution_table steps 2 and 4 where different fields are returned.

Visual Quiz - 3 Questions

Look at the execution table, what response does the REST endpoint send at step 3?

A { data: { user: { name: 'Alice' } } }

B { data: { user: { id: 1, name: 'Alice' } } }

C [{ id: 1, name: 'Alice' }]

D Empty response

💡 Hint

Check the 'Response Sent' column for step 3 in the execution_table.

At which step does GraphQL return only the user's name?

A Step 4

B Step 1

C Step 2

D Step 3

💡 Hint

Look at the 'Response Sent' column for GraphQL responses in execution_table steps 2 and 4.

If the client wants only user IDs, how would the REST response change compared to GraphQL?

A REST would send only IDs by default

B REST would still send full user data unless a new endpoint is made

C GraphQL cannot filter fields

D Both REST and GraphQL send full data always

💡 Hint

Refer to key_moments about REST fixed data shapes and GraphQL flexible queries.

Concept Snapshot

REST vs GraphQL quick view:
- REST: Multiple endpoints, fixed data per endpoint
- GraphQL: Single endpoint, flexible queries
- REST returns full data; GraphQL returns requested fields
- REST needs new endpoints for new data shapes
- GraphQL queries specify exactly what data is needed

Full Transcript

This visual trace compares REST and GraphQL in an Express server. The client sends requests to either REST endpoints or a GraphQL endpoint. REST endpoints return fixed data shapes, so even if the client wants only part of the data, the full data is sent. GraphQL parses the query to return only requested fields, making data transfer efficient. The execution table shows requests and responses step-by-step, highlighting how REST always sends full user data while GraphQL can send partial data. Variable tracking shows request types, endpoints, and response data changing over time. Key moments clarify why REST returns fixed data and how GraphQL filters fields. The quiz tests understanding of these differences using the execution visuals.