Pagination with Connections

The Relay Cursor Connection specification is the standard GraphQL pagination pattern. A connection wraps a list result and provides edges (each containing a node and a cursor) and pageInfo (hasNextPage, hasPreviousPage, startCursor, endCursor). Clients pass first/after for forward pagination and last/before for backward pagination. Offset-based pagination (skip/limit) is simpler to implement but breaks when items are inserted or deleted mid-page. Cursor-based pagination is stable because the cursor points to a specific row, not a position in a set.

Example

# Schema: Relay-style connection
type PostConnection {
  edges: [PostEdge!]!
  pageInfo: PageInfo!
  totalCount: Int!
}

type PostEdge {
  node: Post!
  cursor: String!
}

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

type Query {
  posts(first: Int, after: String, last: Int, before: String): PostConnection!
}

# Query: first page
query FirstPage {
  posts(first: 10) {
    totalCount
    edges {
      cursor
      node { id  title  publishedAt }
    }
    pageInfo { hasNextPage  endCursor }
  }
}

# Query: next page using endCursor from previous response
query NextPage {
  posts(first: 10, after: "cursor_from_previous_response") {
    edges {
      node { id  title }
    }
    pageInfo { hasNextPage  endCursor }
  }
}

HTML

Full Editor

Related Resources

GraphQL Reference

Complete tag & property list

GraphQL How-To Guides

Step-by-step practical guides

GraphQL Exercises

Practice what you've learned