Pagination links in Rest API - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a 'next' pagination link in the response headers.

Rest API

response.headers['Link'] = '<[1]>; rel="next"'

Drag options to blanks, or click blank then click option'

A/api/items?page=1

B/api/items?page=0

C/api/items?page=2

D/api/items?page=last

Attempts:

3 left

💡 Hint

Common Mistakes

Using the current page URL instead of the next page.

Using an invalid page number like 0.

The 'next' link points to the next page, which is page 2 here.

2fill in blank

medium

Complete the code to add a 'prev' pagination link in the response headers.

Rest API

response.headers['Link'] = '<[1]>; rel="prev"'

Drag options to blanks, or click blank then click option'

A/api/items?page=2

B/api/items?page=1

C/api/items?page=0

D/api/items?page=3

Attempts:

3 left

💡 Hint

Common Mistakes

Using the current page URL instead of the previous page.

Using a page number that is out of range like 0.

The 'prev' link points to the previous page, which is page 2 here.

3fill in blank

hard

Fix the error in the code to correctly format multiple pagination links in the 'Link' header.

Rest API

response.headers['Link'] = '<[1]>; rel="prev", <[2]>; rel="next"'

Drag options to blanks, or click blank then click option'

A/api/items?page=1

B/api/items?page=2

C/api/items?page=3

D/api/items?page=4

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same URL for both 'prev' and 'next' links.

Not separating the links properly.

Each link must be unique. Using the same blank twice causes both links to be identical, which is wrong. The first blank should be the previous page URL, and the second blank should be the next page URL.

4fill in blank

hard

Fill both blanks to correctly generate 'prev' and 'next' pagination links in the 'Link' header.

Rest API

response.headers['Link'] = '<[1]>; rel="prev", <[2]>; rel="next"'

Drag options to blanks, or click blank then click option'

A/api/items?page=1

B/api/items?page=2

C/api/items?page=3

D/api/items?page=4

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping 'prev' and 'next' URLs.

Using the same URL for both links.

The 'prev' link points to page 1, and the 'next' link points to page 3, assuming the current page is 2.

5fill in blank

hard

Fill all three blanks to generate a full 'Link' header with 'first', 'prev', and 'next' pagination links.

Rest API

response.headers['Link'] = '<[1]>; rel="first", <[2]>; rel="prev", <[3]>; rel="next"'

Drag options to blanks, or click blank then click option'

A/api/items?page=1

B/api/items?page=2

C/api/items?page=3

D/api/items?page=4

Attempts:

3 left

💡 Hint

Common Mistakes

Incorrect page numbers for 'prev' or 'next'.

Missing the 'first' link.

The 'first' link always points to page 1, 'prev' is page 2, and 'next' is page 3, assuming the current page is 3.

Practice

1. What is the main purpose of pagination links in a REST API?

easy

A. To split large data into smaller pages for easier access

B. To encrypt the data sent from the server

C. To speed up the server response time by caching

D. To validate user authentication tokens

Solution

1. Step 1: Understand pagination concept

   Pagination divides large data sets into smaller, manageable pages.

2. Step 2: Identify purpose of pagination links

   Pagination links help clients navigate between these pages easily.

3. Final Answer:

   To split large data into smaller pages for easier access -> Option A

4. Quick Check:

   Pagination = split data into pages [OK]

Hint: Pagination means breaking data into pages for easy reading [OK]

Common Mistakes:

• Confusing pagination with data encryption
• Thinking pagination speeds up server response
• Mixing pagination with authentication

2. Which of the following is the correct syntax for a pagination link in an HTTP header?

easy

A. Link: ; rel="next"

B. Link: https://api.example.com/items?page=2 rel=next

C. Link: rel=next

D. Link: https://api.example.com/items?page=2; rel="next"

Solution

1. Step 1: Review correct Link header format

   The URL must be enclosed in angle brackets <> and rel value in quotes.

2. Step 2: Match syntax with options

   Link: ; rel="next" correctly uses <URL> and rel="next" with quotes.

3. Final Answer:

   Link: <https://api.example.com/items?page=2>; rel="next" -> Option A

4. Quick Check:

   Link header syntax = <URL>; rel="value" [OK]

Hint: Use angle brackets for URL and quotes for rel value [OK]

Common Mistakes:

• Omitting angle brackets around URL
• Not quoting the rel attribute value
• Missing semicolon between URL and rel

3. Given the HTTP Link header:
Link: <https://api.example.com/items?page=3>; rel="next", <https://api.example.com/items?page=1>; rel="prev"
What URL should the client use to get the previous page?

medium

A. https://api.example.com/items?page=3

B. https://api.example.com/items?page=4

C. https://api.example.com/items?page=1

D. https://api.example.com/items?page=2

Solution

1. Step 1: Identify rel attributes in Link header

   Rel="next" points to page 3, rel="prev" points to page 1.

2. Step 2: Find URL for previous page

   The client should use the URL with rel="prev", which is page 1.

3. Final Answer:

   https://api.example.com/items?page=1 -> Option C

4. Quick Check:

   Prev page URL = page=1 [OK]

Hint: Look for rel="prev" to find previous page URL [OK]

Common Mistakes:

• Choosing the next page URL instead of previous
• Confusing page numbers in URLs
• Ignoring rel attribute values

4. You receive this Link header:
Link: https://api.example.com/items?page=2; rel="next"
Why might this cause an error when parsing pagination links?

medium

A. The page number is invalid

B. The rel attribute value is missing quotes

C. The semicolon is missing between URL and rel

D. The URL is not enclosed in angle brackets

Solution

1. Step 1: Check Link header syntax rules

   URLs must be enclosed in angle brackets <> for correct parsing.

2. Step 2: Identify error in given header

   The URL is not inside <>, which can cause parsing errors.

3. Final Answer:

   The URL is not enclosed in angle brackets -> Option D

4. Quick Check:

   URL must be in <> for Link header [OK]

Hint: Always put URLs in angle brackets in Link headers [OK]

Common Mistakes:

• Forgetting angle brackets around URLs
• Assuming quotes around rel are optional
• Misplacing semicolons in header

5. You want to implement pagination links for an API returning 100 items with 10 items per page. Which Link header correctly provides navigation for page 5?

hard

A. Link: ; rel="next", ; rel="prev"

B. Link: ; rel="next", ; rel="prev"

C. Link: ; rel="next", ; rel="prev"

D. Link: ; rel="next", ; rel="prev"

Solution

1. Step 1: Calculate next and previous pages for page 5

   Next page after 5 is 6, previous page before 5 is 4.

2. Step 2: Match correct URLs with rel attributes

   Link: ; rel="next", ; rel="prev" correctly assigns page=6 to rel="next" and page=4 to rel="prev".

3. Final Answer:

   Link: <https://api.example.com/items?page=6>; rel="next", <https://api.example.com/items?page=4>; rel="prev" -> Option B

4. Quick Check:

   Page 5 next=6, prev=4 [OK]

Hint: Next page = current +1, prev page = current -1 in Link header [OK]

Common Mistakes:

• Swapping next and prev URLs
• Using current page number for both next and prev
• Incorrect page numbers outside valid range