gatsby-node.js ファイルの中で動的にページを生成する際に、context を渡すことができます。これを template page 内の GraphQL で使うサンプルは公式チュートリアルでよくみるのですが、直接 template page component の中で使用する方法を調べたのでメモして残します。

slug という名前で渡しています。

gatsby-node.js
createPage({
      path: node.slug,
      component: path.resolve(`./src/templates/blog-post.js`),
      context: {
        slug: node.slug,
      },
    })

受ける時には、pageContext という名前で props に入ってきますので以下のように受け取ることができます。

template-component.js
export default ({ data, pageContext }) => {
  const { tag } = pageContext
  return (
    <Layout title={`${tag} のページ`} description={`${tag} ごとのページ`}>
      <ul>
        {data.allContentfulBlogPost.edges.map(({ node }) => {
          const date = parse(node.createdAt)
          const formattedDate = format(date, 'YYYY/MM/DD')
          return (
            <li key={node.slug}>
              <Link to={`${node.slug}`}>
                {node.title} {formattedDate}
              </Link>
            </li>
          )
        })}
      </ul>
    </Layout>
  )
}