Pagination patterns in Node.js - Mini Project: Build & Apply

Pagination Patterns in Node.js

📖 Scenario: You are building a simple Node.js server that returns a list of products. To avoid sending too many products at once, you want to add pagination. This means the server will send only a small group of products per request, based on the page number and page size.

🎯 Goal: Create a Node.js script that holds a list of products and implements pagination logic. You will set up the data, configure page size, write the pagination function, and finally return the correct page of products.

📋 What You'll Learn

Create an array called products with exactly 10 product names as strings.

Create a variable called pageSize and set it to 3.

Write a function called getPage that takes pageNumber and returns the correct slice of products based on pageSize.

Call getPage with pageNumber 2 and store the result in a variable called page2Products.

💡 Why This Matters

🌍 Real World

Pagination is used in web servers and APIs to send data in small chunks, improving speed and user experience.

💼 Career

Understanding pagination is essential for backend developers working with databases and APIs to efficiently manage large data sets.

1

Create the product list

Create an array called products with these exact product names as strings: 'Apple', 'Banana', 'Carrot', 'Dates', 'Eggplant', 'Fig', 'Grape', 'Honeydew', 'Iceberg', 'Jackfruit'.

Node.js

// Create the products array with the exact names
// Your code here

Hint

Use square brackets [] to create an array and separate each product name with commas.

2

Set the page size

Create a variable called pageSize and set it to the number 3.

Node.js

const products = ['Apple', 'Banana', 'Carrot', 'Dates', 'Eggplant', 'Fig', 'Grape', 'Honeydew', 'Iceberg', 'Jackfruit'];

// Create pageSize variable and set it to 3
// Your code here

Hint

Use const pageSize = 3; to create a fixed page size.

3

Write the pagination function

Write a function called getPage that takes a parameter pageNumber. Inside, calculate the start index as (pageNumber - 1) * pageSize. Return a slice of products from the start index to start + pageSize.

Node.js

const products = ['Apple', 'Banana', 'Carrot', 'Dates', 'Eggplant', 'Fig', 'Grape', 'Honeydew', 'Iceberg', 'Jackfruit'];
const pageSize = 3;

// Write getPage function to return correct products slice
// Your code here

Hint

Use slice(start, end) on the products array to get the correct page.

4

Get the second page products

Call the getPage function with pageNumber 2 and store the result in a variable called page2Products.

Node.js

const products = ['Apple', 'Banana', 'Carrot', 'Dates', 'Eggplant', 'Fig', 'Grape', 'Honeydew', 'Iceberg', 'Jackfruit'];
const pageSize = 3;

function getPage(pageNumber) {
    const start = (pageNumber - 1) * pageSize;
    return products.slice(start, start + pageSize);
}

// Call getPage with 2 and save to page2Products
// Your code here

Hint

Use const page2Products = getPage(2); to get the second page.

Practice

1.

What is the main purpose of pagination in a Node.js application?

easy

A. To combine all data into one large response

B. To split large data into smaller pages for faster loading and better user experience

C. To delete old data automatically

D. To encrypt data before sending it to the client

Solution

1. Step 1: Understand pagination concept

   Pagination divides data into smaller chunks or pages to avoid loading everything at once.

2. Step 2: Identify the benefit in Node.js apps

   This improves speed and usability by sending only a subset of data per request.

3. Final Answer:

   To split large data into smaller pages for faster loading and better user experience -> Option B

4. Quick Check:

   Pagination = split data for speed [OK]

Hint: Pagination means splitting data into pages for faster loading [OK]

Common Mistakes:

• Thinking pagination deletes data
• Confusing pagination with encryption
• Assuming pagination combines all data

2.

Which of the following is the correct way to use limit and offset for pagination in a SQL query within Node.js?

SELECT * FROM users ORDER BY id ASC LIMIT ? OFFSET ?;

easy

A. limit = number of items per page, offset = (page number - 1) * number of items per page

B. limit = page number, offset = number of items per page

C. limit = total items, offset = 0

D. limit = number of items per page, offset = page number

Solution

1. Step 1: Understand limit and offset roles

   Limit controls how many items to fetch; offset skips items before starting.

2. Step 2: Calculate offset for pagination

   Offset should skip items from previous pages: (page number - 1) * items per page.

3. Final Answer:

   limit = number of items per page, offset = (page number - 1) * number of items per page -> Option A

4. Quick Check:

   Offset skips previous pages = (page-1)*limit [OK]

Hint: Offset skips previous pages: (page-1) times limit [OK]

Common Mistakes:

• Using offset as page number directly
• Swapping limit and offset values
• Setting offset to page number without calculation

3.

Given this Node.js code snippet using a database query for pagination:

const page = 3;
const limit = 10;
const offset = (page - 1) * limit;
const results = await db.query('SELECT * FROM products ORDER BY id ASC LIMIT ? OFFSET ?', [limit, offset]);
console.log(results.length);

If the database has 25 products, what will results.length print?

medium

A. 25

B. 10

C. 15

D. 5

Solution

1. Step 1: Calculate offset and limit values

   Page 3 means offset = (3-1)*10 = 20, limit = 10.

2. Step 2: Determine how many products remain after offset

   There are 25 products total, offset 20 skips first 20, leaving 5 products.

3. Final Answer:

   5 -> Option D

4. Quick Check:

   Remaining items after offset = 5 [OK]

Hint: Last page may have fewer items than limit [OK]

Common Mistakes:

• Assuming full limit items always returned
• Calculating offset incorrectly
• Ignoring total number of products

4.

Identify the error in this Node.js pagination code snippet:

const page = 0;
const limit = 10;
const offset = page * limit;
const results = await db.query('SELECT * FROM items LIMIT ? OFFSET ?', [limit, offset]);

What is the problem with this code?

medium

A. Offset should be negative for first page

B. Limit should be zero to fetch all items

C. Page number should start from 1, not 0, causing incorrect offset

D. Query syntax is invalid with placeholders

Solution

1. Step 1: Check page number usage

   Page is set to 0, but pagination usually starts at 1.

2. Step 2: Calculate offset impact

   Offset = 0 * 10 = 0, so it fetches first page, but page 0 is invalid logically.

3. Final Answer:

   Page number should start from 1, not 0, causing incorrect offset -> Option C

4. Quick Check:

   Page numbering starts at 1 [OK]

Hint: Page numbers start at 1, not 0 [OK]

Common Mistakes:

• Using page 0 as valid page
• Setting limit to zero incorrectly
• Misunderstanding offset calculation

5.

You want to implement cursor-based pagination in Node.js for a real-time chat app. Which approach is best to fetch the next page of messages?

// Current last message ID is stored in lastMessageId
const query = 'SELECT * FROM messages WHERE id < ? ORDER BY id DESC LIMIT ?';
const results = await db.query(query, [lastMessageId, limit]);

Why is this approach better than using offset?

hard

A. Cursor pagination avoids skipping items and handles new data better than offset

B. Offset pagination is faster for real-time data

C. Cursor pagination requires less code but is less reliable

D. Offset pagination works better with unordered data

Solution

1. Step 1: Understand cursor pagination

   Cursor uses a unique ID to fetch next items after the last seen message.

2. Step 2: Compare with offset pagination

   Offset can skip or repeat items if data changes during pagination; cursor avoids this.

3. Final Answer:

   Cursor pagination avoids skipping items and handles new data better than offset -> Option A

4. Quick Check:

   Cursor = stable pagination with changing data [OK]

Hint: Cursor uses last ID to avoid skipping new data [OK]

Common Mistakes:

• Thinking offset is better for real-time data
• Assuming cursor is less reliable
• Confusing cursor with offset usage