📋JSON Templates

Cursor-based Pagination

Cursor-based pagination for APIs with real-time data or frequent updates.

Explanation

Cursor pagination prevents issues with skipped or duplicate items when data changes between requests.

Examples

Response with Next Cursor

Output

{
  "data": [
    {
      "id": "usr_123",
      "name": "User 1",
      "createdAt": "2024-12-17T10:00:00Z"
    },
    {
      "id": "usr_124",
      "name": "User 2",
      "createdAt": "2024-12-17T10:05:00Z"
    }
  ],
  "pagination": {
    "nextCursor": "eyJpZCI6InVzcl8xMjQifQ==",
    "hasMore": true
  }
}

Code Examples

TypeScript

interface CursorPaginatedResponse<T> {
  data: T[];
  pagination: {
    nextCursor?: string;
    prevCursor?: string;
    hasMore: boolean;
  };
}

// Encode cursor
function encodeCursor(id: string): string {
  return Buffer.from(JSON.stringify({ id })).toString('base64');
}

// Decode cursor
function decodeCursor(cursor: string): { id: string } {
  return JSON.parse(Buffer.from(cursor, 'base64').toString());
}

Try it Now

Open in JSON Formatter Open in Base64 Encoder

💡 Tips

Use base64-encoded JSON for cursor values
Include sort field in cursor (e.g., createdAt + id)
Always include hasMore flag
Consider including prevCursor for bidirectional navigation

⚠️ Common Pitfalls

Can't jump to arbitrary pages
Total count is expensive to calculate
Cursors become invalid if underlying data is deleted