Loving Tina? ⭐️ us on GitHubStar

Docs

Learn

v.Latest
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Media
Drafts
Guides
Further Reference

Collection queries implement cursor based pagination. The client specifies a result limit parameter (using first or last) and a corresponding cursor parameter (using after or before) which is a pointer to the last item on the previous page of results.

Both of these parameters are optional. If a result limit is omitted, a maximum of 10 results will be returned. If the cursor is omitted, results will start with the first matching item.

Page Info

A pageInfo object is available for collection queries and can be used for forward and reverse pagination.

In addition to pageInfo, each edge in a query result provides a cursor field which can also be used for pagination.

The table below describes the properties available on the pageInfo object:

Field

Type

Description

hasNextPage

boolean

During forward pagination, indicates if another page of results is available.

hasPreviousPage

boolean

During reverse pagination, indicates if another page of results is available.

startCursor

string

The cursor of the first item in the result set.

endCursor

string

The cursor of the last item in the result set.

Forward pagination

To page through query results in the forward direction, the first and after arguments are used, in combination with the PageInfo's endCursor.

Example

Here we will query our post collection with postConnection, limiting the page size to 1 and starting at the second item:

{
postConnection(sort: "date", first: 1, after: "cG9zdCNkYXRlIzE2NTUyNzY0MDAwMDAjY29udGVudC9wb3N0cy92b3RlRm9yUGVkcm8uanNvbg==") {
edges {
node {
id
title
date
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
{
"data": {
"postConnection": {
"edges": [
{
"node": {
"id": "content/posts/anotherPost.json",
"title": "Just Another Blog Post",
"date": "2022-07-15T07:00:00.000Z"
}
}
],
"pageInfo": {
"hasNextPage": true,
"endCursor": "cG9zdCNkYXRlIzE2NTc4Njg0MDAwMDAjY29udGVudC9wb3N0cy9hbm90aGVyUG9zdC5qc29u"
}
}
}
}

Reverse pagination

To page through query results in the reverse direction, the last and before arguments are used, in combination with the PageInfo's startCursor.

Example

Here we will query our post collection with postConnection, limiting the page size to 1 and starting at the first item:

{
postConnection(sort: "date", last: 1, before: "cG9zdCNkYXRlIzE2NTc4Njg0MDAwMDAjY29udGVudC9wb3N0cy9hbm90aGVyUG9zdC5qc29u") {
edges {
node {
id
title
date
}
}
pageInfo {
hasPreviousPage
endCursor
}
}
}
{
"data": {
"postConnection": {
"edges": [
{
"node": {
"id": "content/posts/voteForPedro.json",
"title": "Vote For Pedro",
"date": "2022-06-15T07:00:00.000Z"
}
}
],
"pageInfo": {
"hasPreviousPage": false,
"endCursor": "cG9zdCNkYXRlIzE2NTUyNzY0MDAwMDAjY29udGVudC9wb3N0cy92b3RlRm9yUGVkcm8uanNvbg=="
}
}
}
}
Last Edited: August 15, 2024