ブログにページネーションを導入した

表題の通りブログにページネーションを追加した。

公式に追加の仕方とチュートリアルがあるのでその通りにやれば、実装できる。

Adding Pagination

方法

/pages/index.tsxをtemplate配下のディレクトリに変更する。

その後gatsby-node.jsに変更を加える。

// Create blog-list pages
  const posts = result.data.allMarkdownRemark.edges
  const postsPerPage = 10
  const numPages = Math.ceil(posts.length / postsPerPage)
  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/blog` : `/blog/${i + 1}`,
      component: path.resolve("./src/templates/blog-list-template.js"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    })
  })

• createPage関数でページネーション用のページを作成するのに必要な情報を定義する
  • 表示件数
  • ページのパス
  • ブログ記事の総数を計算して表示件数を割る計算
• GraphQLで新たにlimitとskipを取得するようにcontext内に格納してあげる。

template配下に移動したindex.tsxのGraphQLでlimitとskipを取得する

export const blogListQuery = graphql`
  query blogListQuery($skip: Int!, $limit: Int!) {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
          }
        }
      }
    }
  }
`

ページネーションするコンポーネントを表示する。

<div className="pagenation">
  {!isFirst && (
    <Link to={prevPage} rel="prev">
      &lt; Prev
    </Link>
  )}
  {!isLast && (
    <Link to={nextPage} rel="next" className="pagenation-next">
      Next &gt;
    </Link>
  )}
</div>

ちなみに以下のようにする1ページずつ遷移ではなくページ番号で遷移できるコンポーネントが実装できる。

 {Array.from({ length: numPages }, (_, i) => (
  <Link key={`pagination-number${i + 1}`} to={`/${i === 0 ? "" : i + 1}`}>
    {i + 1}
  </Link>
))}

他にもプラグインを使用して実装する方法もある。参考になるブログは以下

gatsby-awesome-paginationでGatsbyにpaginationをつけた