Gatsbyでページネーションを実装する(1)

$ npm install --save gatsby-awesome-pagination
or
$ npm i -S gatsby-awesome-pagination

src/pages/index.js
↓ 移動
src/templates/index.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)
// (1)
+ const { paginate } = require('gatsby-awesome-pagination')

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  // Define a template for blog post
  const blogPost = path.resolve(`./src/templates/blog-post.js`)

  // Get all markdown blog posts sorted by date
  const result = await graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: ASC }
          limit: 1000
        ) {
          nodes {
            id
            fields {
              slug
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(
      `There was an error loading your blog posts`,
      result.errors
    )
    return
  }

  const posts = result.data.allMarkdownRemark.nodes

  if (posts.length > 0) {
// (2)
+    paginate({
+      createPage,
+      items: posts,
+      itemsPerPage: 2,
+      component: path.resolve('./src/templates/index.js'),
+      pathPrefix: ({ pageNumber }) => (pageNumber === 0 ? "/" : "/page"),
+    })
    ...
  }

items : ページネーション対象にしたいデータ。
itemsPerPage : 各ページに表示したい件数。今回は1ページあたり2件ずつ表示することになる。
component : ページを作成するために使用するテンプレート。index.jsが記事一覧ページとして使われていたので今回は流用しています。
pathPrefix : ページのurl設定。今回は1ページ目は「/」、2ページ目以降は「/page/2」、「/page/3」...となります。
createPage : 上記の設定を元に引数を作成してこのメソッドが呼ばれます。GatsbyにあるcreatePage関数を渡しており、こちらを呼び出すとページが作成される仕組み。

export const pageQuery = graphql`
-  query {
+  query($skip: Int!, $limit: Int!) {
    site {
      siteMetadata {
        title
      }
    }
-    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
+    allMarkdownRemark(
+      sort: { fields: [frontmatter___date], order: DESC }
+      skip: $skip
+      limit: $limit
+    ) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
          description
        }
      }
    }
  }
`

import Seo from "../components/seo"
+import Pagination from "../components/pagination"

-const BlogIndex = ({ data, location }) => {
+const BlogIndex = ({ data, location, pageContext }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const posts = data.allMarkdownRemark.nodes

  return (
    <Layout location={location} title={siteTitle}>
      <Seo title="All posts" />
      <Bio />
      ...
      <Pagination pageContext={pageContext} />
    </Layout>
  )
}

pageNumber : 0始まりのページ番号。
humanPageNumber : 1始まりのページ番号。
skip : 記事を何個飛ばしているか。
limit : 1ページあたりの表示件数。
numberOfPages : 全ページ数。
previousPagePath : 前のページのurl。なければnullになる。
nextPagePath : 次のページのurl。なければnullになる。

import React from "react"
import { Link } from "gatsby"

const style = {
  marginRight: '5px'
};

const Pagination = ({ pageContext }) => {
  // (1)
  const { numberOfPages, humanPageNumber, previousPagePath, nextPagePath } = pageContext;
  // (2)
  const pages = Array.from({ length: numberOfPages }, (v, i) => i + 1);

  return (
    <>
    　// (3)
      {
        previousPagePath
          ? <Link to={previousPagePath} style={style}>prev</Link>
          : null
      }
      // (2)
      {
        pages.map(page => (
          humanPageNumber !== page
            ? <Link key={page} to={page === 1 ? "/" : `/page/${page}`} style={style}>{page}</Link>
            : <span style={style}>{page}</span>
        ))
      }
      // (3)
      {
        nextPagePath
          ? <Link to={nextPagePath} style={style}>next</Link>
          : null
      }
    </>
  );
}

export default Pagination