gatsby-starter-blogにページネーションを追加する

前提として初期のテンプレートとして gatsby-starter-blog を使用しているので、graphqlのクエリなどはこちらの実装に準拠しています。

まずは gatsby-awesome-pagination をインストールします。

yarn add gatsby-awesome-pagination

次に、 gatsby-node.js でPaginationに対応したページを作成するように修正します。

gatsby-node.js

// ページネーション用ライブラリの読み込み
const { paginate } = require(`gatsby-awesome-pagination`)

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions // ページを作成するための関数を取り出し

  // graphqlを実行し、ブログポスト情報を取得
  const result = await graphql(`...`)
  const posts = result.data.postsRemark.nodes

  // ページネーションのためのページを作成
  paginate({
    createPage,
    items: posts, // ページ情報の配列
    itemsPerPage: 10, // ページごとに表示する投稿数
    pathPrefix: '/blog', // ページのパス
    component: path.resolve(`src/components/blogtop.tsx`) // ページネーションページ作成時のテンプレート
  })
  ...
}

ページクエリーにskipとlimitを指定できるようになっているので、これを指定する。
これでページを作成するときに指定した投稿数ごとにページが作られる。

export const pageQuery = graphql`
  query PageIndex($skip: Int, $limit: Int) {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      skip: $skip
      limit: $limit
    ) {
      ...
    }
  }
`

参考

• gatsby-awesome-pagination | Gatsby