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:

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