GraphQL pagination comparison: Apollo vs Relay

May 24th, 2021

	Relay	Apollo
GraphQL API	Requires a certain structure in the GraphQL schema	Works with any GraphQL schema
Complexity	Slow learning curve: Lots of powerful magic happening behind the scenes	Low entrance barrier: Let’s you get started quickly and involves more manual work for certain features
Flexibility	Almost no flexibility, strict rules how to integrate Relay with React components	Lots of flexibility how Apollo is used throughout a whole project, easy to adopt incrementally
Usage of GraphQL Fragments	Relies on fragments as an essential tool to express data requirements per component	Fragments are a convenience to improve structuring of GraphQL queries and mutations that generally enable reusablity of GraphQL code
GraphQL Subscriptions	No explicit means to integrate subscriptions	Subscriptions supported through `subscriptions-transport-ws`

Cursor-Based pagination

Cursor-based pagination is well-suited to datasets updated at high velocities because it helps address the issue of page window inaccuracies that can happen with offset-based pagination.

source

This style of pagination does have its trade-offs though. A cursor-based approach has the downside of not providing any way to jump to a specific page number or calculate the total number of pages. However, if you're building an app that will be updated rapidly and with infinite scrolling implemented in the user interface to browse content, then the lack of numbered pages and total page counts likely won't be deal-breakers for your app.

source

graphql

query personViewer($cursor: String) {
  personViewer(first: 5, after: $cursor) {
    edges {
      node {
        name
        picture
        id
        comment
      }
    }
    pageInfo {
      hasNextPage
      cursor
    }
  }
}

Relay-Style pagination

Relay-style pagination is an opinionated flavor of cursor-based pagination for GraphQL APIs.

source

An important thing to keep in mind with Relay-style pagination is that it is uni-directional by design. If you need to implement "Previous Page" and "Next Page" buttons to traverse content in an app, then Relay-style pagination probably won't work well for you (although a quick Google search will reveal some proposed workarounds for supporting bi-directional paging with Relay).

source

graphql

{
  user {
    id
    name
    friends(first: 10, after: "opaqueCursor") {
      edges {
        cursor
        node {
          id
          name
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
}

A connection is a paginated field on an object — for example, the friends field on a user or the comments field on a blog post.
An edge has metadata about one object in the paginated list, and includes a cursor to allow pagination starting from that object.
A node represents the actual object you were looking for.
pageInfo lets the client know if there are more pages of data to fetch. In the Relay specification, it doesn’t tell you the total number of items, because the client cache doesn’t need that info. It would be up to the developer to expose that information through another field.

source

Pareto principle in testing

Pareto Principle is also known as the 80-20 rule. In software testing this principle means that 80% of the found bugs are due to 20% of the…

February 26th, 2021

Interfaces in Go vs TS

Although interfaces in Go and TS are quite different, it was fun to see a comparison between how these are being used in both contexts.

July 18th, 2021