Pagination

Overview

Pagination is a way to fetch data from a dataset in pieces, rather than all at once. DeliveryTracker uses a GraphQL Relay-style Connection Pagination method.

What is Relay-style Connection Pagination?

Relay-style Pagination presents data as a linked list. Each item is a "node", and the entire linked list is made up of two parts: "edges" and "pageInfo".

Components

• edges: A list of actual data. Each item consists of a node and a cursor.
• node: The actual data object.
• cursor: A unique identifier that represents the location of each node.
• pageInfo: Represents pagination information, including information such as startCursor, endCursor, hasPreviousPage, hasNextPage, etc.

Example

{
  carriers(first: 10) {
    edges {
      node {
        id
        name
      }
      cursor
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}

In the example above, carriers(first: 10)' gets the first 10 items. It gets the id and name of each item, and the cursor tells it where it is located. The pageInfo provides whether there is data on the next page and the cursor of the last item.

Query arguments

Relay-style Pagination uses the following arguments for pagination

• first: The number of items to import.
• after: Gets items after the corresponding cursor.
• last: The number of items to fetch from the last.
• before: Gets the items before the corresponding cursor.

For example, the combination first: 10 and after: "someCursor" will get the 10 items after "someCursor".

Conclusion

Relay-style Connection Pagination is the standard for effective pagination in GraphQL. Once you understand the concepts of edges, node, cursor, and pageInfo, you can easily slice and dice your data.