https://github.com/kbariotis/gatsby-plugin-paginate

Plug and play pagination plugin for Gatsby
https://github.com/kbariotis/gatsby-plugin-paginate

gatsby gatsby-plugin gatsbyjs paginate pagination

Last synced: about 1 month ago
JSON representation

Plug and play pagination plugin for Gatsby

• Host: GitHub
• URL: https://github.com/kbariotis/gatsby-plugin-paginate
• Owner: kbariotis
• License: mit
• Created: 2018-06-19T08:48:58.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-20T05:46:09.000Z (over 6 years ago)
• Last Synced: 2024-09-28T14:01:19.396Z (about 2 months ago)
• Topics: gatsby, gatsby-plugin, gatsbyjs, paginate, pagination
• Language: JavaScript
• Size: 20.5 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Gatsby Pagination Plugin

Just plug and play.

Check an example of how I am using it on my [personal website](https://github.com/kbariotis/kostasbariotis.com).

## Installation

`npm i --save gatsby-plugin-paginate`

## Configuration

### Plugin

In your `gatsby-config.js`:

```Javascript

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

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