Gatsby.js スタティックサイトのチュートリアル Part 9

Gatsby.jsでMDXを使用したブログサイトを作成するチュートリアルのPart9です。今回はgatsby-awesome-paginationブラグインを使用して、ブログページにページネーションを実装します。下記のような手順になります。

1. gatsby-awesome-paginationプラグインをインストール
2. gatsby-node.jsの作成
3. pager.jsの作成
4. blog.jsの修正

gatsby-awesome-paginationプラグインをインストール

Gatsbyの公式ドキュメントにはプラグインを使用しないでページネーションを実装する方法も紹介されていますが、今回はgatsby-awesome-paginationプラグインを使用します。CLIで下記コマンドを実行します。

npm install gatsby-awesome-pagination

このプラグインはgatsby-config.jsに追記する必要はありません。

gatsby-node.jsの作成

ルートフォルダにgatsby-node.jsを作成します。このファイルはビルド時に一度だけ実行されるファイルで動的なページを作成するために使用します。下記のように作成します。

gatsby-node.js

const path = require(`path`)
const { paginate } = require(`gatsby-awesome-pagination`)

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions
  const result = await graphql(`
  query {
    allMdx(sort: {frontmatter: {date: DESC}}, limit: 1000) {
      edges {
        node {
          frontmatter {
            slug
          }
        }
      }
    }
  }
  `)

  if (result.errors) {
     reporter.panicOnBuild(`Error while running GraphQL query.`)
     return
   }

  paginate({
    createPage,
    items: result.data.allMdx.edges, 
    itemsPerPage: 2,
    pathPrefix: "/blog",
    component: path.resolve(`src/templates/blog.js`),
  }) 
}

paginateのitemsPerPageでページ内に表示するアイテム数を指定します。

Pager.jsの作成

ブログページで使用するためにcomponentsフォルダ内にPagerコンポーネントを作成します。

src/components/pager.js

import * as React from 'react'
import { Link } from 'gatsby'

const Pager = ({ pageContext }) => {
  const {
    previousPagePath,
    nextPagePath,
    humanPageNumber,
    numberOfPages,
  } = pageContext

  return (
    <nav>
    {previousPagePath ? (
      <Link to={previousPagePath}>
        <button>
          Prev
        </button>
      </Link>
    ) : null}
    {numberOfPages > 1 && (
      <span> Page {humanPageNumber} of {numberOfPages} </span>
    )}
    {nextPagePath && (
      <Link to={nextPagePath}>
        <button>
          Next
        </button>
      </Link>
    )}
    </nav>
  )
}

export default Pager

blog.jsの修正

gatsby-node.jsでsrc/templates/blog.jsを読み込むように指定しているのでblog.jsを移動します。

src/pages/blog/blog.js  ->  src/templates/blog.js

Pagerコンポーネントを読み込んで下記のように変更します。queryの引数に$skipと＄limitを追加する必要があります。

src/templates/blog.js

import * as React from 'react'
import { Link, graphql } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'
import Layout from '../components/layout'
import Seo from '../components/seo'
import Pager from '../components/pager'

const BlogPage = ({ data, pageContext }) => {
  return (
    <Layout pageTitle="Blog">
      {
	data.allMdx.nodes.map((node) => (
	  <article key={node.id}>
            <h2>
	      <Link to={`/blog/${node.frontmatter.slug}`}>{node.frontmatter.title}</Link>
	    </h2>
	    <Link to={`/blog/${node.frontmatter.slug}`}>
	      <GatsbyImage
		image={getImage(node.frontmatter.hero_image)}
		alt={node.frontmatter.hero_image_alt}
	      />
	    </Link>
	    <span>Posted: {node.frontmatter.date}</span>
	    <p>{node.excerpt}</p>
	  </article>
	))
      }
      <Pager pageContext={pageContext} />
    </Layout>
  )
}

export const query = graphql`
  query($skip: Int!, $limit: Int!) {
    allMdx(
      sort: { frontmatter: { date: DESC } }
      skip: $skip
      limit: $limit
    ) {
      nodes {
        frontmatter {
	  title
          date(formatString: "MMMM D, YYYY")
	  slug
	  hero_image_alt
	  hero_image {
	    childImageSharp {
	      gatsbyImageData
	    }
	  }
        }
        id
        excerpt
      }
    }
  }
`

export const Head = () => <Seo title="Blog" />

export default BlogPage

これで実装完了です。表示を確認します。

Nextボタンを押すと次のページ（http://localhost:8000/blog/2/）に移動できます。

Pagerコンポーネントにスタイリングを追加したい場合は、pager.module.cssを作成して読み込ませるのが簡単かと思います。今回は以上です。