Paginating query results

Table of Contents

Page Info
Forward pagination
- Example
Reverse pagination
- Example

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

Docs

Paginating query results

Page Info

Forward pagination

Example

Reverse pagination

Example