Add Support fo Relay Cursor Connections

[igdianov]

Relay is a framework for retrieving and caching data from a GraphQL server for a React application. It handles pagination in a really interesting way by allowing the client to paginate forward and backwards from any item returned in the collection.

Relay enables this pagination by defining a specification for how a GraphQL server should expose lists of data called Relay Cursor Connections.

The spec outlines the following components:

connection: a wrapper for details on a list of data you’re paginating through. A connection has two fields: edges and pageInfo.

edges: a list of edge types.

edge: a wrapper around the object being returned in the list. An edge type has two fields: node and cursor

node: this is the actual object, for example, user details.

cursor: this is a string field that is used to identify a specific edge.

pageInfo: contains two fields hasPreviousPage and hasNextPage which can be used to determine whether or not you need to request another set of results.

Using all of these together in a GraphQL query for listing users on a team might look like this:

{
  Books(
    first: 2 
    after: "b2Zmc2V0PTI="
    where: {title: {IS_NULL: false}}
  ) {
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
    edges {
      node {
        id
        title
        description
        author {
          id
          name
        }
      }
      cursor
    }
  }
}

{
  "data": {
    "Books": {
      "pageInfo": {
        "hasNextPage": true,
        "hasPreviousPage": true,
        "startCursor": "b2Zmc2V0PTM=",
        "endCursor": "b2Zmc2V0PTQ="
      },
      "edges": [
        {
          "node": {
            "id": 5,
            "title": "The Cherry Orchard",
            "description": null,
            "author": {
              "id": 4,
              "name": "Anton Chekhov"
            }
          },
          "cursor": "b2Zmc2V0PTM="
        },
        {
          "node": {
            "id": 6,
            "title": "The Seagull",
            "description": null,
            "author": {
              "id": 4,
              "name": "Anton Chekhov"
            }
          },
          "cursor": "b2Zmc2V0PTQ="
        }
      ]
    }
  }
}