Pagination

To implement pagination we make use of the pageInfo: PageInfo property:

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

Where hasNextPage and hasPreviousPage will tell us wether there is a next or previous page or we hit the last or first one respectively.

On the other hand, startCursor and endCursor will give us cursor values for the start and end of the collection retrieved. These can be used as the after or before parameter in subsequent queries.

Example - getting paginated projects

We run the following query:

Query

query firstPage {
  me {
    accounts(first: 1) {
      nodes {
        projects(first: 3) {
          pageInfo {
            hasNextPage
            endCursor
          }
          nodes {
            name
          }
        }
      }
    }
  }
}

Response

{
  "data": {
    "me": {
      "accounts": {
        "nodes": [
          {
            "projects": {
              "pageInfo": {
                "hasNextPage": true,
                "endCursor": "Mw"
              },
              "nodes": [
                {
                  "name": "Cool Project"
                },
                {
                  "name": "Deep Crawling"
                },
                {
                  "name": "Pro Ject"
                }
              ]
            }
          }
        ]
      }
    }
  }
}

cURL

curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"query":"query firstPage { me { accounts(first: 1) { nodes { projects(first: 3) { pageInfo { hasNextPage endCursor } nodes { name } } } } } }"}' https://api.lumar.io/graphql

Try in explorer

We can then get the second page with the query:

Query

query secondPage {
  me {
    accounts(first: 1) {
      nodes {
        projects(first: 3, after: "Mw") {
          pageInfo {
            hasNextPage
            endCursor
          }
          nodes {
            name
          }
        }
      }
    }
  }
}

Response

{
  "data": {
    "me": {
      "accounts": {
        "nodes": [
          {
            "projects": {
              "pageInfo": {
                "hasNextPage": true,
                "endCursor": "Ng"
              },
              "nodes": [
                {
                  "name": "Dev.io: Main"
                },
                {
                  "name": "Dev.io: Blog"
                },
                {
                  "name": "Some Project"
                }
              ]
            }
          }
        ]
      }
    }
  }
}

cURL

curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"query":"query secondPage { me { accounts(first: 1) { nodes { projects(first: 3, after: \"Mw\") { pageInfo { hasNextPage endCursor } nodes { name } } } } } }"}' https://api.lumar.io/graphql

Try in explorer