Pagination with Mock API Studio
The editor below is preset with a photos resource and 25 records, the most a free project holds, which is enough for 3 pages of 12 with a one-item last page (Pro holds up to 5,000 for a long infinite-scroll feed). Press Create my API and every list request accepts page and limit and answers with X-Total-Count and a Link header, so you can test page numbers, next and previous buttons and load-more against a real API.
- Keep the count at 25 and press Create my API. Fewer records means fewer pages; 25 gives 3 pages of 12 with a one-item last page, the case most pagers get wrong. More than 25 records needs Pro.
- Request a page: GET /photos?_page=2&_limit=12 (page and limit work too). The body is a plain array of 12 photos; X-Total-Count is 25.
- Read the Link header for navigation. It holds absolute first, prev, next and last URLs and keeps your other parameters, such as sort and filters, in each of them.
- Test the edges: _page=3 returns the last item, _page=4 returns an empty array with status 200, and the Link header on page 1 has no prev.
- Combine with sort and filters: ?_sort=likes&_order=desc&_page=1&_limit=12, or ?likes_gte=100 to see the total and the page count shrink.
What to know
Pagination bugs hide at the boundaries: the last page that is not full, the page after the last one, a total that changes while you scroll, a filter applied after paging instead of before. A fixture array cannot show any of these. This API filters and sorts first, then counts, then slices, so X-Total-Count is always the number of matching records and the pages are stable for a given query.
Page numbers start at 1. If you pass either page or limit, the other defaults (page 1, limit 10) and limit is capped at 1,000; if you pass neither, you get the whole list. The underscore names (_page, _limit, _sort, _order) follow the json-server 0.17 convention and the plain names do the same thing, so a client written for either style works. There is no cursor or offset parameter; to test cursor pagination, filter on the last id you received, such as ?id_gte=26&_limit=12 after id 25.
For infinite scroll, follow rel="next" until it disappears instead of computing page numbers yourself; the header looks like <https://tools.cosmovexapps.com/mock/{project}/photos?_page=3&_limit=12>; rel="next". The API exposes X-Total-Count and Link through Access-Control-Expose-Headers, so browser code can read both with response.headers.get().
Every photo has an image and a thumbnail URL that load, so a masonry grid or a skeleton loader is tested with real image requests. To test the loading spinner itself, Pro adds latency injection (fixed or random up to 2 seconds) and an error rate so a page fetch can fail and your retry path runs.
Updated · Cosmovex
Questions
Does the API return a total count?
Yes, in the X-Total-Count response header, on every list request. It counts records after filters and search are applied, so ?likes_gte=100 shows the number of matching photos, not all 25. The header is exposed to browser JavaScript through CORS.
What does the Link header contain?
Absolute URLs with rel first, prev, next and last, in the format GitHub's API uses. prev is left out on page 1 and next is left out on the last page, and each URL keeps your sort, order and filter parameters.
Is the response wrapped in a data object?
No. A list is a plain JSON array and the paging information is in the headers. If your real API returns {data, meta} envelopes, wrap the response in one small adapter function so only that function changes when you switch.
What happens if I request a page past the end?
You get status 200 and an empty array, the same behaviour as json-server. A page or limit that is not a number falls back to the defaults (page 1, limit 10) instead of failing.
Can I simulate a slow network while paging?
Pro adds latency injection from 0 to 2,000 ms, fixed or random, and random 500, 502 or 503 errors at a rate you choose. On the free plan, use the browser's network throttling in DevTools.
The free plan covers everything on this page. Mock API Studio Pro ($5/mo, billed monthly) is described on the Mock API Studio page.
