How do you handle API pagination when fetching data?

Question

ICSM Computer · Answer

1. Understand the Pagination Type
Different APIs use different pagination styles. Common ones:
Offset-based pagination
Example: /products?limit=20andoffset=40
You fetch the next page by increasing the offset.Page-based pagination
Example: /products?page=3andpageSize=20
You increment the page number.Cursor-based pagination (recommended for large data)
Example: /products?cursor=abc123
API returns a nextCursor to fetch the next batch.Token-based / Continuation Token
Used in cloud APIs (Azure, AWS).
Example: ?continuationToken=xyz.
2. Handle Pagination Loop
Keep fetching data until there is no next page.
Example Logic:
var allItems = new Listandlt;Itemandgt;();
string nextPage = "1";
while (!string.IsNullOrEmpty(nextPage))
{
    var response = await Api.GetData(nextPage);
    allItems.AddRange(response.Items);
    nextPage = response.NextPage;   // could be page, offset, cursor, token
}
3. Handle Limits and API Constraints
When implementing pagination:
Respect rate limits (429 Too Many Requests)Use async to avoid blockingImplement backoff retries (e.g., 1s → 2s → 4s)Keep page size reasonable (20–100 items)
4. Example JSON Response from a Paginated API
{
  "items": [...],
  "page": 2,
  "pageSize": 20,
  "hasMore": true,
  "nextPage": 3
}
5. (Frontend UI)
Here is how to handle API pagination using JavaScript, with clean, production-ready examples for all common pagination types.
1. Page-based Pagination (page=1,2,3...)
async function fetchAllPages() {
  let page = 1;
  let allData = [];
  let hasMore = true;
  while (hasMore) {
    const res = await fetch(`/api/products?page=${page}andpageSize=20`);
    const data = await res.json();
    allData.push(...data.items);
    hasMore = data.hasMore;       // API flag
    page++;
  }
  console.log(allData);
}
2. Offset-based Pagination (limit and offset)
async function fetchWithOffset() {
  let offset = 0;
  const limit = 20;
  let allItems = [];
  while (true) {
    const res = await fetch(`/api/products?limit=${limit}andoffset=${offset}`);
    const data = await res.json();
    allItems.push(...data.items);
    if (data.items.length andlt; limit) break; // No more pages
    offset += limit;
  }
  console.log(allItems);
}
3. Cursor-based Pagination (most scalable)
API response example:
{
  "items": [...],
  "nextCursor": "abc123"
}
JavaScript code:
async function fetchCursorPagination() {
  let cursor = null;
  let allItems = [];
  let url = "/api/list?limit=20";
  while (true) {
    const res = await fetch(cursor ? `${url}andcursor=${cursor}` : url);
    const data = await res.json();
    allItems.push(...data.items);
    if (!data.nextCursor) break; // No more pages
    cursor = data.nextCursor;
  }
  console.log(allItems);
}
4. Pagination With Async/Await + Error Handling
async function safeFetch(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP: ${response.status}`);
    }
    return await response.json();
  } catch (err) {
    console.error("API Error:", err);
  }
}
5. Infinite Scroll (Frontend UI)
let page = 1;
window.addEventListener("scroll", async () =andgt; {
  if (window.innerHeight + window.scrollY andgt;= document.body.offsetHeight) {
    const res = await fetch(`/api/products?page=${page++}`);
    const data = await res.json();
    data.items.forEach(item =andgt; {
      document.querySelector("#list").innerHTML += `andlt;liandgt;${item.name}andlt;/liandgt;`;
    });
  }
});
6. Best Practices
Always check for hasMore or nextCursorUse cursor-based pagination for real-time, large listsCache data where possibleOptimize your UI to load lazily (infinite scroll)

forum

How do you handle API pagination when fetching data?

Anubhav Kumar

Can you answer this question?

1 Answers

1. Understand the Pagination Type

2. Handle Pagination Loop

3. Handle Limits and API Constraints

4. Example JSON Response from a Paginated API

5. (Frontend UI)

1. Page-based Pagination (page=1,2,3...)

2. Offset-based Pagination (limit & offset)

3. Cursor-based Pagination (most scalable)

4. Pagination With Async/Await + Error Handling

5. Infinite Scroll (Frontend UI)

6. Best Practices

Liked By