gatsby-pagination

This simple utility is intended to help authors add pagination to their GatsbyJS projects. The library works by dividing the provided data set into smaller subsets, then calling Gatsby's createPage method for each subset. In addition to the subset data itself, each page also receives helpful pagination variables, modeled after Ghost's pagination data.

Installation

npm install --save gatsby-pagination

Usage

Overview

To create pages with pagination, gatsby-pagination should be required in gatsby-node.js. Instead of calling Gatsby's createPage directly, call createPaginationPages. The method requires a reference to createPage, your data set, as well as a component.

The name of the component is critical to the location of the intended page, see Gatsby's createPage documentation to learn more about components.

Starting from the root page, each additional page included it's page number in the route. e.g. /blog for page 1, /blog/2 for page 2, etc.

Recommended reference: Creating pages in gatsby-node.js

Require the package

In gatsby-node.js require or import the createPaginationPages factory method from gatsby-pagination.

const { createPaginationPages } = require("gatsby-pagination");

Call createPaginatePages

In export.createPages get a reference to Gatsby's createPage method from access to boundActionCreators. Provide createPaginatePages with createPage, the data set of nodes, and the component to generate the pages with pagination. Additionally, createPaginationPages takes optional limit parameters for setting the maximum number of node per subset and pathFormatter which can be use to creating custom paths.

See the createPaginatePages documentation for more details.

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  return new Promise((resolve, reject) => {
    const indexPage = path.resolve("src/components/index.jsx");
    const postPage = path.resolve("src/components/post.jsx");
    resolve(
      graphql(
        `add GraphQL query`
      ).then(result => {
        if (result.errors) {
          reject(result.errors);
        }

        createPaginationPages({
          createPage: createPage,
          edges: result.data.allMarkdownRemark.edges,
          component: indexPage,
          limit: 5
        });

          createPage({
            path: edge.node.id,
            component: postPage,
            context: {
              slug: edge.node.fields.slug
            }
          });
        });
      })
    );
  });
};

Create the index.js component

Create an index.js templates and make sure to remove any other pages which could collide with the '/index' path. Gatsby-pagination adds extra pagination properties to the page's pathContext, such as prev and next.

See the pathContext documentation for more details.

import React from "react";
import Link from "gatsby-link";

const IndexPage = ({ data, pathContext }) => {
  const { nodes, page, prev, next, pages, total, limit } = pathContext;
  const PaginationLink = props => {
    if (props.to && props.text) {
      return <Link to={props.to} text={props.text} />;
    }
    return null;
  };

  return (
    <div>
      {nodes.map(({ node }) => (
        <div className="postList" key={node.id}>
          <div className="postDate">{node.frontmatter.date}</div>
          <Link className="postUrl" to={node.fields.slug}>
            {node.frontmatter.title}
          </Link>
          <div> className="postExcerpt" {node.excerpt}</div>
        </div>
      ))}
      <div className="previousPost">
        <PaginationLink to={prev} text="Go to Previous Page" />
      </div>
      <div className="nextPost">
        <PaginationLink to={next} text="Go to Next Page" />
      </div>
    </div>
  );
};

import Index from "../components/index";

export default IndexPage;

export const query = graphql`add GraphQL query`;

License

MIT