Pagination with React / Relay / GraphQL

(written by lawrence krubner, however indented passages are often quotes). You can contact lawrence at: lawrence@krubner.com

This is an awesome article:

Relay proposes a standard to define a has-many relationship for a GraphQL field. This standard defines a common structure that allows Relay to paginate and filter the results in an efficient way by using cursors, which I’ll explain in a bit.

This is the definition of a Relay connection (from the Relay connection specs):

Relay’s support for pagination relies on the GraphQL server exposing connections in a standardized way. In the query, the connection model provides a standard mechanism for slicing and paginating the result set. In the response, the connection model provides a standard way of providing cursors, and a way of telling the client when more results are available.

Let’s look at an example using with this simple graph:

This would be the implementation (using graphql-ruby) and query example without using a Relay connection for the relationship:

Node definition

For the query:

// Query:
query { viewer { newCandidates { recordId, name } } }
// Result
{
   "data":{
      "viewer":{
         "newCandidates":[
            {
               "recordId":1,
               "name":"John Nash"
            },
            {
               "recordId":2,
               "name":"Issac Newton"
            },
            {
               "recordId":6,
               "name":"Charles Xavier"
            }
         ]
      }
   }
}

As you can see, this works a first step to render the list of candidates, but this query will bring all the records from the database and that’s not what we want. Let’s take a look at what is the Relay connection standard and how we can convert this relationship into that model.

Source