~/tools / 09 / paginated-api-response
Paginated Data Seeder
Pagination bugs hide at the edges: the last page, the empty page, the cursor that says there is nothing more. Seed all of them instantly — a classic offset envelope with page/per_page/total metadata, a cursor-based shell for infinite scroll, and a final short page to prove your "load more" button knows when to stop.
— validating —
$ man pagination
Everything above is encoded into the #data= fragment of the exported URL — deflated and base64url-packed by your browser. Fragments are never sent to any server, so this mock is shareable and private. Paste the URL anywhere: a teammate's browser decodes it identically.
cat ./tldr.txt
A paginated API response mocker wraps result arrays in the metadata shells clients depend on — offset style with page, per_page, total, and total_pages, or cursor style with before/after cursors and has_next_page — so pagination controls and infinite scroll can be tested at their edges.
./when-to-use-this
- Your load-more button never stops because the last page has never been tested.
- You need to confirm the UI handles a final page that is shorter than per_page.
- You are switching from offset to cursor pagination and want to prototype the client against the new shape first.
./frequently-asked
- When should I use cursor pagination instead of offset?
- Use cursors when the underlying list changes while users page through it. Offset pagination re-runs the query each time, so newly inserted rows shift results and users see duplicates or skipped items. Cursors anchor to a specific record, which keeps infinite scroll stable on active datasets.
- What is the Link header in the offset templates for?
- It is the RFC 8288 way to express pagination in headers rather than the body, using rel="next", rel="prev", rel="first", and rel="last". GitHub and other large APIs use it so clients can follow pagination without parsing the payload. The templates include it so you can test clients that read either location.
- How do I test the empty state?
- Edit the data array to be empty and set total to 0. That combination — a well-formed envelope wrapping nothing — is the case that most often renders a blank screen instead of a proper empty state, and it is worth having a shareable URL for.