GraphQL Pagination Example (v4)

Example1.md

Here is a GraphQL query to fetch my repositories

{
  user(login: "Mattamorphic") {
    repositories(first: 2) {
      edges {
        cursor
        node {
          name
        }
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
}

• The outer query user(login: "Mattamorphic") is returning a single user which is this: https://developer.github.com/v4/object/user/
• This User object has a repositories connection, a connection is the edge betweeen the User object (node), and the Repository object (node)
• Here's a blog that explains this further https://blog.apollographql.com/explaining-graphql-connections-c48b7c3d6976

Connections have parameters that specify a way to slice the amount of edges / nodes we are returning:

• first: X limit to the first X amount of connections (created time)
• last: X limnit to the last X amount of connections (created time)
• after: X after the cursor (offset)

Connections return three main fields:

• edges A list of edges, composed of the fields cursor and node
• nodes A list of just the nodes themselves
• pageInfo An object containing endCursor the last cursor on the current page of results, hasNextPage a boolean (true | false) field on if there are more pages

Example2.md

So the above query returns:

{
  "data": {
    "user": {
      "repositories": {
        "edges": [
          {
            "cursor": "Y3Vyc29yOnYyOpHOAg3S_Q==",
            "node": {
              "name": "Hello-World"
            }
          },
          {
            "cursor": "Y3Vyc29yOnYyOpHOAj64IA==",
            "node": {
              "name": "nodejs-CSV"
            }
          }
        ],
        "pageInfo": {
          "endCursor": "Y3Vyc29yOnYyOpHOAj64IA==",
          "hasNextPage": true
        }
      }
    }
  }
}

• The data field is the result of the query
• The user is the result of the user(login: "Mattamorphic") object we requests (remember GraphQL is declarative, we specify the shape of what we want back in the request)
• The repositories field returns the connections we request in repositories(first: 2) - we asked for the first 2 connections by created date
• The edges field is a list of connections between the User node and the Repository node, paginated by the first: 2 limit
• For each of the edges we want the cursor (the offset), and from the node (the Repository object for that result) we want the name field
• Finally for the whole connection we want the page info, are the more pages? and what is the end cursor? (the last offset in the current results).

Example3.md

Finally if we want the next page of results, we want to tell our repositories connection to start after the last offset on the previous page of results.

So:

1. We check to see if hasNextPage is true.
2. If hasNextPae is true, we use the value in endCursor as the parameter value for after in our next request

What we are saying is fetch the next 2 results, by created time, after the cursor, after the offset.

{
  user(login: "Mattamorphic") {
    repositories(first: 2, after: "Y3Vyc29yOnYyOpHOAj64IA==") {
      edges {
        cursor
        node {
          name
        }
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
}