Pagination

When a one-to-many relationship exists between two nodes, for example organization -> plans, we paginate the responses from the query. Forward, cursor based pagination is used, for more details see here.​
Forward Pagination
The arguments for forward pagination are:
first  a non-negative integer representing the number of results
after: the cursor of which the results will be after
The connection which is returned includes the following fields:
pageInfo: which contains the fields hasNextPage and endCursor  
edges: which includes a list of edges. Each edge contains the cursor for that node and the node itself
Example:
For this example we will go through the organization link to plans.
Firstly we'll get the plans connection with the first two edges:
{
  viewer{
    username
    organization {
      plans(first: 2) {
        pageInfo{
          hasNextPage
          endCursor
        }
        edges {
          cursor
          node {
            name            
          }
        }
      }
​
    }
  }
}
This returns:
{
  "data": {
    "viewer": {
      "username": "[email protected]",
      "organization": {
        "plans": {
          "pageInfo": {
            "hasNextPage": true,
            "endCursor": "YXJyYXljb25uZWN0aW9uOjE="
          },
          "edges": [
            {
              "cursor": "YXJyYXljb25uZWN0aW9uOjA=",
              "node": {
                "name": "Field Map"
              }
            },
            {
              "cursor": "YXJyYXljb25uZWN0aW9uOjE=",
              "node": {
                "name": "Downtown Map"
              }
            }
          ]
        }
      }
    }
  }
}
You can see that hasNextPage is true so we know there are more items and the endCursor is set to the last item in the response. Two fetch the next page you simply update the query to include the after parameter for the connection:
{
  viewer{
    username
    organization {
      plans(first: 2, after:"YXJyYXljb25uZWN0aW9uOjE=") {
        pageInfo{
          hasNextPage
          endCursor
        }
        edges {
          cursor
          node {
            name            
          }
        }
      }
​
    }
  }
}
This returns the data:
{
  "data": {
    "viewer": {
      "username": "[email protected]",
      "organization": {
        "plans": {
          "pageInfo": {
            "hasNextPage": true,
            "endCursor": "YXJyYXljb25uZWN0aW9uOjM="
          },
          "edges": [
            {
              "cursor": "YXJyYXljb25uZWN0aW9uOjI=",
              "node": {
                "name": "New map"
              }
            },
            {
              "cursor": "YXJyYXljb25uZWN0aW9uOjM=",
              "node": {
                "name": "Untitled Plan"
              }
            }
          ]
        }
      }
    }
  }
}
Last modified 4yr ago