Skip to content
Gatsby utility that generates pages with pagination
Branch: master
Clone or download
haysclark Merge pull request #15 from DirtyF/patch-1
Index plugin on Gatsby's website
Latest commit ac1b0ef Mar 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
src feat: adding ‘layout’ support to createLinkedPages Mar 1, 2018
.babelrc initial version of gatsby-pagination utility Dec 19, 2017
.eslintrc initial version of gatsby-pagination utility Dec 19, 2017
.gitignore initial version of gatsby-pagination utility Dec 19, 2017
.npmignore fix: setting prettier to ignore CHANGELOG.md Dec 19, 2017
.prettierignore fix: setting prettier to ignore CHANGELOG.md Dec 19, 2017
.travis.yml feat: adding createLinkedPages method Jan 3, 2018
CHANGELOG.md > gatsby-pagination@1.2.0 docs /Users/hays/infinitedescent/gatsby-pag… Mar 1, 2018
LICENSE
README.md Update README.md Jan 28, 2018
package-lock.json > gatsby-pagination@1.2.0 docs /Users/hays/infinitedescent/gatsby-pag… Mar 1, 2018
package.json

README.md

gatsby-pagination

NPM version Travis build status Coverage Status Conventional Commits

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

You can’t perform that action at this time.