HATEOAS concept overview in Express - Step-by-Step Execution

Concept Flow - HATEOAS concept overview

Client sends request

↓

Server processes request

↓

Server sends response with data + links

↓

Client reads data

↓

Client follows links for next actions

↓

Repeat as needed

This flow shows how a client requests data, the server responds with data plus helpful links, and the client uses those links to navigate the API.

Execution Sample

Express

app.get('/books/:id', (req, res) => {
  res.json({
    id: req.params.id,
    title: 'Example Book',
    links: [{ rel: 'author', href: '/authors/123' }]
  });
});

This Express route sends book data with a link to the author resource, showing HATEOAS in action.

Execution Table

Step	Action	Request URL	Response Data	Links Included
1	Client requests book with id 1	/books/1	N/A	N/A
2	Server receives request	/books/1	N/A	N/A
3	Server prepares response	/books/1	{ id: '1', title: 'Example Book' }	[{ rel: 'author', href: '/authors/123' }]
4	Server sends response	/books/1	{ id: '1', title: 'Example Book', links: [...] }	Yes
5	Client receives response	/books/1	{ id: '1', title: 'Example Book', links: [...] }	Yes
6	Client uses link to get author	/authors/123	N/A	N/A

💡 Client uses links in response to navigate API without hardcoding URLs.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
req.params.id	undefined	1	1	1
response data	empty	{ id: '1', title: 'Example Book' }	{ id: '1', title: 'Example Book', links: [...] }	{ id: '1', title: 'Example Book', links: [...] }

Key Moments - 2 Insights

Why does the server send links along with data?

The server includes links so the client knows what actions or related data are available next, as shown in step 3 and 4 of the execution_table.

Does the client need to know all URLs beforehand?

No, the client discovers URLs dynamically from the links in the server response, avoiding hardcoded paths (see step 6).

Visual Quiz - 3 Questions

Look at the execution_table, what does the server include in the response at step 4?

A Only raw data without links

B Data plus links to related resources

C Only links without data

D An error message

💡 Hint

Check the 'Response Data' and 'Links Included' columns at step 4.

At which step does the client use the link to get the author information?

A Step 2

B Step 4

C Step 6

D Step 1

💡 Hint

Look at the 'Action' column describing client behavior after receiving links.

If the server did not include links in the response, what would change in the execution_table?

A The 'Links Included' column would be empty or 'No' at step 4

B The client would still use links at step 6

C The server would send an error at step 4

D The client would request the author at step 2

💡 Hint

Consider how the presence of links affects client navigation in the table.

Concept Snapshot

HATEOAS means the server sends data plus links to related actions.
Clients use these links to navigate the API dynamically.
This avoids hardcoding URLs in the client.
In Express, include a 'links' array in JSON responses.
Clients read links to know what to do next.

Full Transcript

HATEOAS stands for Hypermedia As The Engine Of Application State. It means when a client asks the server for data, the server replies with the data plus links to related resources or actions. This way, the client can discover what to do next by following these links instead of guessing URLs. In Express, you can add a 'links' array in your JSON response to show these related URLs. The client reads these links and uses them to navigate the API smoothly. This approach makes APIs easier to use and more flexible.