Gatsby製ブログ記事で前後の記事を表示させる

2021-1-9

Gatsby製のブログで記事の最後に前後記事へのリンクを追加したので、方法を紹介します。

まずはgatsby-node.jsでデータを得る

　GraphQLで前後の記事のデータを取得します。それぞれnext,prevで指定できます。このブログではマークダウンのファイル名をslugとして利用しているので、slugとtitleを指定。

  const res = await graphql(`
    {
      postsRemark: allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 2000
      ) {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              tags
            }
          }
          next {
            fields {
              slug
            }
            frontmatter {
              title
            }
          }
          prev: previous {
            fields {
              slug
            }
            frontmatter {
              title
            }
          }
        }
      }
	  //...省略
	  }

ここでpostRemarkとなっているのは同じクエリ内にタグを指定する別のallMarkdownRemarkがあるからです。

ブログテンプレートに前後記事のデータをpropsとして渡します。

 res.data.postsRemark.edges.forEach(edge => {
    createPage({
      component: blogTemplate,
      path: `/blog/${edge.node.fields.slug}`,
      context: {
        slug: edge.node.fields.slug,
        next: edge.next,
        prev: edge.prev,
      },
    })
  })

ブログテンプレートの編集

next,prevは props.pageContext経由で取得できます。

	//...省略
      <div>
        {props.pageContext.prev && (
          <Link to={`/blog/${props.pageContext.prev.fields.slug}`}>
            {props.pageContext.prev.frontmatter.title}
          </Link>
        )}
        <br />
        {props.pageContext.next && (
          <Link to={`/blog/${props.pageContext.next.fields.slug}`}>
            {props.pageContext.next.frontmatter.title}
          </Link>
        )}
      </div>

以上になります。 starterによっては、初めから導入されている機能かもしれませんが、ブログには欠かせないものだと思います。

参考になれば幸いです。それでは。