Paginate your results

The results retrieved from the Prismic repository will automatically be paginated. Here you will find an explanation of how to modify the pagination parameters.


Before Reading

The Prismic GraphQL API returns a maximum of 20 documents per request. There is no way to increase this number, so this page explains how you can retrieve more than this initial 20 documents.

A cursor-based pagination

To access your document's data, you will have to go through two levels of data: edges and nodes.

Copy
query {
  allBlogs {
    edges {
      node {
        title
      }
    }
  }
}

These two levels allow us to provide more data to handle pagination.

Edges

At the edges level, you can use the totalCount & pageInfo fields to get the following pagination information.

totalCount

number

The total number of items across all the pages of the pagination

hasPreviousPage

boolean

Let's you know if there is a page of results before the current page

hasNextPage

boolean

Let's you know if there is a page of results after the current page

startCursor

string

Gives you the cursor of the item that starts the current list

endCursor

string

Gives you the cursor of the item that ends the current list

Here's an example that includes all these fields:

Copy
query {
  allBlog_posts {
    totalCount
    pageInfo {
      hasPreviousPage
      hasNextPage
      startCursor
      endCursor
    }
    edges {
      node {
        title
      }
      cursor
    }
  }
}

Node

Each node represents a document published in the API for your request.

At the node level, you will find a cursor that will provide a GraphQL ID for the document. This cursor is mainly helpful when you would like to query the documents that come before or after it.

Here is an example of how to get the cursor for your document:

Copy
query {
  allBlogs {
    totalCount
    pageInfo {
      hasPreviousPage
      hasNextPage
      startCursor
      endCursor
    }
    edges {
      node {
        title
      }
      cursor
    }
  }
}

Query arguments

There are four arguments that you can use to retrieve more documents from your GraphQL API: after, before, first, & last.

The after & first arguments

Once you have a given cursor, you can use the after argument to retrieve the documents that come after it. This works well with first argument which lets you specify how many items to retrieve (up to a maximum of 20 items).

Copy
query {
  allBlog_posts(after:"YXJyYXljb25uZWN0aW9uOjE5", first: 10) {
    totalCount
    pageInfo {
      hasPreviousPage
      hasNextPage
      startCursor
      endCursor
    }
    edges {
      node {
        title
      }
      cursor
    }
  }
}

The before & last arguments

Likewise, you can use the before argument to retrieve the documents that come before the given cursor. This works well with last argument which lets you specify how many items to retrieve (up to a maximum of 20 items).

Copy
query{
  allBlog_posts(before:"YXJyYXljb25uZWN0aW9uOjE5", last: 10) {
    edges {
      node {
        title
      }
      cursor
    }
  }
}