gpp
gatsby-plugin-paginate
npm i gatsby-plugin-paginate
gpp

gatsby-plugin-paginate

Plug and play pagination plugin for Gatsby

by Kostas Bariotis

1.12.0 (see all)License:MITTypeScript:Not FoundCategories:Gatsby Pagination
npm i gatsby-plugin-paginate
Readme

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:

NameRequiredPurpose
pathfalseThe prefix for each page. E.g.: /path will become /path/1, /path/2, etc..
templatetruePath to the template to be used for each page
querytrueThe GraphQL query to fetch the data to paginate
serializefalseIf the GraphQL query doesn't return a list, convert it here
pageSizefalseThe number of items per page

Template

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

NamePurpose
postsThe collection of items for that page as returned from your GraphQL query
pageThe current page number
pagesSumTotal pages number
prevPathThe path to the previous page
nextPathThe path to the next page

Contribute

Please open an issue with your specific use case or bug or help me resolve other's issues. :)