Gatsby Pagination Plugin

Just plug and play.

Check an example of how I am using it on my personal website.

Installation

npm i --save gatsby-plugin-paginate

Configuration

Plugin

In your gatsby-config.js:

module.exports = {
  plugins: [
    ...
    {
      resolve: `gatsby-plugin-paginate`,
      options: {
        sources: [
          {
            path: `/page`,
            pageSize: 5,
            template: `${__dirname}/src/templates/page.js`,
            serialize: (results) => results.allMarkdownRemark.edges,
            query: `{
              allMarkdownRemark {
                edges {
                  node {
                    excerpt(pruneLength: 250)
                    html
                    id
                    timeToRead
                    frontmatter {
                      date
                      path
                      tags
                      title
                    }
                  }
                }
              }
            }`
          }
        ]
      }
    }
    ...
  ]
}

Configuration Options:

Name	Required	Purpose
path	false	The prefix for each page. E.g.: `/path` will become `/path/1`, `/path/2`, etc..
template	true	Path to the template to be used for each page
query	true	The GraphQL query to fetch the data to paginate
serialize	false	If the GraphQL query doesn't return a list, convert it here
pageSize	false	The number of items per page

Template

The template component will receive a pageContext (pathContext if you are in Gatsby v1) with the following properties:

Name	Purpose
posts	The collection of items for that page as returned from your GraphQL query
page	The current page number
pagesSum	Total pages number
prevPath	The path to the previous page
nextPath	The path to the next page

Contribute