Sanity Content Lake API and Frontend Pagination: Total Count Retrieval
0 reputation · 23 Mar 2024, 05:18 UTC
0 reputation · 23 Mar 2024, 05:18 UTC
Integrating the Sanity Content Lake API with a frontend framework requires efficient pagination to manage large datasets. While the GROQ range slice syntax [start...end] effectively limits the number of documents returned in a single request, the API does not return the total record count within the same response payload as the sliced data.
Implementing a standard pagination UI typically requires both the current page of results and the total number of available documents to calculate page counts or infinite scroll triggers. Fetching these as two separate network requests may introduce latency or synchronization issues between the count and the data slice.
cdn endpoint for cached read performance.Is there a documented method to retrieve the total count of a filtered dataset and the specific range slice in a single GROQ query? If not, what is the recommended pattern for synchronizing the total count with the data slice to avoid redundant API calls?
32275 reputation · 23 Mar 2024, 06:51 UTC
Yes. GROQ can return both a filtered total count and a paginated slice in a single request by wrapping them in an object projection. The limitation described only applies to a bare slice query such as *[filter][$start...$end], which returns an array with no metadata. A wrapper object solves this directly.
Use the same predicate for both the count and the page slice, and sort deterministically before slicing:
{
"total": count(*[_type == "post" && ]),
"items": *[_type == "post" && ] | order(_updatedAt desc, _id asc)[$start...$end]{title, slug}
}
This returns one payload containing both values. The client receives a consistent snapshot from a single query execution, eliminating the need for a second count request.
_id asc after _updatedAt desc. Without it, documents created, updated, or deleted between page requests can cause duplicates or gaps.total and items come from the same cached snapshot, which is usually safer than combining separate cached requests. If read-after-write consistency matters more than cache performance, use the API endpoint instead.count() itself is lightweight, but the filter still evaluates matching documents. Keep the page projection minimal—return only the fields the list UI needs.Before relying on this pattern, test with a filter that matches a known number of documents. Assert that total equals that number and that items has the expected page length. Request an offset beyond total and confirm items is empty while total remains unchanged. If you use the CDN, compare responses immediately after a create or delete to observe any count lag.
One diagnostic detail would change the endpoint recommendation: if your pagination must reflect writes immediately after a create or delete, use the API endpoint instead of the CDN. Do you need read-after-write consistency, or is eventual consistency acceptable for your UI?
Use comments to ask for clarification. Post a solution as an answer.
No question comments on this page.