Pagination patterns in Node.js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this cursor-based pagination snippet?

Consider this Node.js function that fetches items using cursor-based pagination. What will be the value of nextCursor after fetching the first page?

Node.js

async function fetchPage(cursor = null) {
  const pageSize = 3;
  const allItems = ['a', 'b', 'c', 'd', 'e', 'f'];
  let startIndex = 0;
  if (cursor) {
    startIndex = allItems.indexOf(cursor) + 1;
  }
  const pageItems = allItems.slice(startIndex, startIndex + pageSize);
  const nextCursor = pageItems.length === pageSize ? pageItems[pageItems.length - 1] : null;
  return { pageItems, nextCursor };
}

(async () => {
  const result = await fetchPage();
  console.log(result.nextCursor);
})();

A "c"

B "d"

C null

D "f"

💡 Hint

Look at how nextCursor is assigned based on the length of pageItems.

The function slices the first 3 items: ['a', 'b', 'c']. Since the page size is 3, nextCursor is set to the last item in the page, which is 'c'.

📝 Syntax

intermediate

Which option correctly implements offset-based pagination in Node.js?

Given a list of items, which code snippet correctly returns a page of items using offset and limit?

Node.js

const items = ['x', 'y', 'z', 'w', 'v'];
function getPage(offset, limit) {
  // return a slice of items
}

A return items.slice(limit, offset + limit);

B return items.slice(offset, limit);

C return items.slice(offset + limit);

D return items.slice(offset, offset + limit);

💡 Hint

Remember that slice(start, end) uses start inclusive and end exclusive.

Option D correctly slices from offset to offset + limit, returning the correct page.

🔧 Debug

advanced

Why does this cursor pagination code cause an infinite loop?

Examine the following code snippet for cursor pagination. Why might it cause an infinite loop when fetching pages?

Node.js

async function fetchPages() {
  let cursor = null;
  while (true) {
    const { items, nextCursor } = await fetchPage(cursor);
    if (!nextCursor) break;
    cursor = cursor;
  }
}

A The cursor is never updated, so the loop never ends.

B The fetchPage function returns an empty array causing no break.

C The break condition is incorrect; it should check items length.

D The while loop syntax is invalid causing runtime error.

💡 Hint

Check how the cursor variable changes inside the loop.

The code sets cursor = cursor; which does not update the cursor. So the same page is fetched repeatedly, causing an infinite loop.

🧠 Conceptual

advanced

What is a key advantage of cursor-based pagination over offset-based pagination?

Choose the best explanation for why cursor-based pagination is often preferred for large datasets.

A Cursor-based pagination requires no state to be stored between requests.

B Cursor-based pagination avoids skipping or duplicating items when data changes during pagination.

C Offset-based pagination uses less memory than cursor-based pagination.

D Cursor-based pagination always loads all data at once, improving speed.

💡 Hint

Think about what happens if data is added or removed while paginating.

Cursor-based pagination uses a stable reference point (cursor) to avoid missing or repeating items if the data changes during pagination.

❓ state_output

expert

What is the final value of page after this asynchronous offset pagination loop?

Given the following code, what will be the value of page after the loop finishes?

Node.js

const items = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
const pageSize = 2;
let offset = 0;
let page = [];

async function getPage(offset, limit) {
  return items.slice(offset, offset + limit);
}

(async () => {
  while (true) {
    page = await getPage(offset, pageSize);
    if (page.length === 0) break;
    offset += pageSize;
  }
  console.log(page);
})();

A ["f", "g"]

B ["g"]

C []

D ["e", "f"]

💡 Hint

Consider what happens when the last page is fetched and the loop breaks.

The loop fetches pages of 2 items until no items remain. The last fetch returns an empty array, which breaks the loop. So page is empty at the end.