vadim.blog | Vadim Nicolai

GraphQL pagination comparison: Apollo vs Relay

May 24th, 2021
RelayApollo
GraphQL APIRequires a certain structure in the GraphQL schemaWorks with any GraphQL schema
ComplexitySlow learning curve: Lots of powerful magic happening behind the scenesLow entrance barrier: Let’s you get started quickly and involves more manual work for certain features
FlexibilityAlmost no flexibility, strict rules how to integrate Relay with React componentsLots of flexibility how Apollo is used throughout a whole project, easy to adopt incrementally
Usage of GraphQL FragmentsRelies on fragments as an essential tool to express data requirements per componentFragments are a convenience to improve structuring of GraphQL queries and mutations that generally enable reusablity of GraphQL code
GraphQL SubscriptionsNo explicit means to integrate subscriptionsSubscriptions 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

More Articles

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
© 2021 vadim.blog | Vadim Nicolai