Posted on: Written by: K-Sato

Pagination

Graphql Connections

The Graphql Connections specification aims to provide an option for GraphQL clients to consistently handle pagination best practices(cursor based pagination) with support for related metadata via a GraphQL server.

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.

{
  user {
    id
    name
    friends(first: 10, after: "opaqueCursor") {
      edges {
        cursor
        node {
          id
          name
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
}
  • Slicing is done with the first argument to friends. This asks for the connection to return 10 friends.
  • Pagination is done with the after argument to friends. We passed in a cursor, so we asked for the server to return friends after that cursor.
  • For each edge in the connection, we asked for a cursor. This cursor is an opaque string, and is precisely what we would pass to the after arg to paginate starting after this edge.
  • We asked for hasNextPage; that will tell us if there are more edges available, or if we’ve reached the end of this connection.

Graphql Relay

Relay is a JavaScript framework for building data-driven React applications powered by GraphQL, designed from the ground up to be easy to use, extensible and, most of all, performant. Relay accomplishes this with static queries and ahead-of-time code generation.

Resources

Types of pagination’s implementations

There are a few ways to implement pagination.

  • Cursor-based pagination
  • limit/offset pagination

According to the Facebook Graph API documentation,

Cursor-based pagination is the most efficient method of paging and should always be used where possible.

Resources

list of all the resources

Pagination(GraphQL)

Pagination(graphql-ruby)

GraphQL Connections

GraphQL Relaly

Pagination(Apollo)

About the author

I am a web-developer based somewhere on earth. I primarily code in Ruby, TypeScript and JavaScript at work. RoR and React are my go-to Frameworks. Sometimes I play with Go language.