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

Introduction to Relay · Relay

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.

GraphQL Pagination

Table of Contents

Graphql Connections

Graphql Relay

Resources

Types of pagination’s implementations

Resources

list of all the resources

Pagination(GraphQL)

Pagination(graphql-ruby)

GraphQL Connections

GraphQL Relaly

Pagination(Apollo)