A collection of pagination tools for Gatsby.

Factory method used to create Gatsby's pages, each provided with a subset of nodes and pagination properties, including the paths of the previous (prev) and next posts if they exist. The API divides the provided data nodes into groups which it provides to the Gatsby's createPage API, along with additional pagination properties. This pagination data is accessible within each 'components' via the pathContext parameter.

• Error: Argument createPage must be provided.
• Error: Argument edges must be provided.
• Error: Argument component must be provided.

each page created will have pagination properties, see pathContext

// usage inside gatsby-node.js
import {createPaginationPages} from "gatsby-pagination";

// ...
createPaginationPages({
  createPage: createPage,
  edges: result.data.allMarkdownRemark.edges,
  component: path.resolve(`./src/templates/my-sweet-new-page.js`),
  // define number of posts per page with limit, which defaults to 10.
  limit: 5
});

This callback is provided the current edge and must generate the path and optionally context object for each page.

Type: Function

// ...
createPaginationPages({
  createPage: createPage,
  edges: result.data.allMarkdownRemark.edges,
  component: path.resolve(`./src/templates/my-sweet-new-page.js`),
  // example pathFormatter
  pathFormatter: path => `/blog/${path}`;
});

Type: Object

// usage of properties provided by createPaginationPages inside the component.
import React from "react";

const IndexPage = ({ data, pathContext }) => {
  const { nodes, page, prev, next, pages, total, limit } = pathContext;

  //...
});

An optional path formatter to utilize with createPaginationPages, enabling users to generate page paths prepend by a prefix.

// usage inside gatsby-node.js
import {createPaginationPages, prefixPathFormatter} from "gatsby-pagination";

//...
createPaginationPages({
  createPage: createPage,
  edges: result.data.allMarkdownRemark.edges,
  component: path.resolve(`./src/templates/my-sweet-new-page.js`),
  // path results: /blog, /blog/2, /blog/3, ...etc
  pathFormatter: prefixPathFormatter("/blog")
});

Factory method used to create Gatsby's pages, each provided with a single of data nodes and pagination properties, including the paths to the previous (prev) and next post if they exist. The API provides each node to Gatsby's createPage API, along with additional pagination properties, perfect for posts that would like to link to the previous or next post. This pagination data is accessible within each 'components' via it's pathContext parameter.

• Error: Argument createPage must be provided.
• Error: Argument edges must be provided.
• Error: Argument component must be provided.
• Error: Argument edgeParser must be provided.

each page created will have pagination properties, see pathContext

// usage inside gatsby-node.js
import {createLinkedPages} from "gatsby-pagination";

//...
createLinkedPages({
  createPage: createPage,
  edges: result.data.allMarkdownRemark.edges,
  component: path.resolve(`./src/templates/my-sweet-pages.js`),
  edgeParser: edge => ({
    path: `/${edge.node.fields.slug}`,
    context: {
      slug: edge.node.fields.slug
    }
  });
});

Parses a given 'edge' and extracts the path and optionally context data to be passed to Gatsby's createPage API.

Type: Function

//...
createLinkedPages({
  createPage: createPage,
  edges: result.data.allMarkdownRemark.edges,
  component: path.resolve(`./src/templates/my-sweet-pages.js`),
  // example edgeParser
  edgeParser: edge => ({
    path: `/${edge.node.fields.slug}`,
    context: {
      slug: edge.node.fields.slug
    }
  });
});

Type: Object

// usage of properties provided by createLinkedPages inside the component.
import React from "react";

const IndexPage = ({ data, pathContext }) => {
  const { prev, next, total } = pathContext;

  //...
});