Paginate your results

By default, the results will be sorted by the last publication date. You can change that change by using the sort argument. 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 access more than these initial 20 documents.

Next & previous nodes

At the edges level, you can use the next and previous nodes to get the metadata of documents that come before and after the current one. These can be used along with your Link Resolver to generate links between pages. To do so, these values need to be provided to the pages via pageContext. This is done in the gatsby-node configuration when creating your pages.

Example

For this example, we're using our Gatsby blog sample.

gatsby-node.js: What we're doing here is add the next and previous nodes in the allPrismicPost query:

Copy

// gatsby-node.js
const path = require('path')

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const pages = await graphql(`
  query paginatedPosts {
    allPrismicPost {
      nodes {
        url
        type
        uid
        lang
      }
      edges {
        next {
          uid
          type
          lang
          id
          url
        }
        previous {
          id
          uid
          type
          lang
          url
        }
      }
    }
  }  
  `)

  pages.data.allPrismicPost.nodes.forEach((page) => {
    createPage({
      path: page.node.url,
      component: path.resolve(__dirname, 'src/templates/Post.js'),
      context: { ...page },
    })
  })
}

linkResolver.js: You'll need to make sure your Link resolver is properly configured so we can use it in the links between pages:

Copy

const linkResolver = (doc) => {
  if (doc.type === 'post') {
    `/post/${doc.uid}`
  }
  return '/'
};

module.exports = linkResolver

Post.js: Now, you need to access the pageContext passed to the page props and use it to create the pagination navigation; this is done by passing the proper document to the Link Resolver:

Copy

import React from 'react'
import { RichText } from 'prismic-reactjs'
import { Link, graphql } from 'gatsby'
import linkResolver from '../utils/linkResolver'

// Pagination component to render the next and previous links
const Pagination = ({ nextArticle, prevArticle }) => (
  <div className="container">
    {prevArticle ? (
      <Link to={linkResolver(prevArticle)} aria-label="Previous Post">
        &larr; Previous
      </Link>
    ) : null}
    {prevArticle && nextArticle && ' -- '}
    {nextArticle ? (
      <Link to={linkResolver(nextArticle)} aria-label="Next Post">
        Next &rarr;
      </Link>
    ) : null}
  </div>
)

// Post template page where we pass info to the Pagination component.
export const PostTemplate = ({ pageContext, data }) => {
  if (!pageContext) return null
  return (
    <div>
      <RichText render={data.prismicPost.data.example_title.raw} />
      <Pagination
        prevArticle={pageContext.previous}
        nextArticle={pageContext.next}
      />
    </div>
  )
}

export const query = graphql`
  query MyQuery($uid: String, $lang: String) {
    prismicPost(uid: { eq: $uid }) {
      url
      uid
      type
      id
      lang
      data {
        example_title {
          raw
        }
      }
    }
  }
`

export default PostTemplate