Pagination

Paginate query resultsAnchor

GraphCMS supports various arguments for paginating content entries:

Argument	Type	Definition
`first`	`Int`	Seek forwards from start of result set.
`last`	`Int`	Seek backwards from end of result set.
`skip`	`Int`	Skip result set by given amount.
`before`	`String`	Seek backwards before specific ID.
`after`	`String`	Seeks forwards after specific ID.

{
  posts(first: 6) {
    id
  }
}

{
  posts(last: 6) {
    id
  }
}

{
  posts(first: 6, skip: 6) {
    id
  }
}

{
  posts(last: 6, before: "...") {
    id
  }
}

{
  posts(first: 6, after: "...") {
    id
  }
}

You cannot combine first with before, or last with after.

The default result size of results returned by queries fetching multiple entries is 100. You can provide a maximum of 1000 to the first, or last arguments.

Nested paginationAnchor

You can also use first, last, skip, before, and after arguments with any nested relations. For example, let's imagine our post has comments:

{
  posts {
    id
    comments(first: 6, skip: 6) {
      id
      createdAt
    }
  }
}

Relay cursor connectionsAnchor

GraphCMS follows the Relay cursor connection specification. Each of your project models also contain a connection type, automatically managed by GraphCMS.

The example below shows us how we can query for the first 3 posts, after the cursor (ID) abc. We can also query pageInfo to check whether there are more pages using hasNextPage.

The PageInfo is useful when paginating.

{
  postsConnection(first: 3, after: "abc") {
    edges {
      cursor
      node {
        id
        title
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
      pageSize
    }
  }
}

Learn more about fetching with Relay.

Pagination

Paginate query resultsAnchor

Nested paginationAnchor

Relay cursor connectionsAnchor

Did you find this page useful?