Gatsbyの公式ドキュメントには、MDXファイルから props 変数経由で frontmatter を参照できると書いてあります。
Frontmatter is also available in
props.pageContext.frontmatterand can be accessed in blocks of JSX in your MDX document:
例えば、以下のように frontmatter で定義した title は props.pageContext.frontmatter.title という形式で参照することができます。
---
title: Building with Gatsby
author: Jay Gatsby
---
<h1>{props.pageContext.frontmatter.title}</h1>
<span>{props.pageContext.frontmatter.author}</span>
(Blog post content, components, etc.)ところが自分のページでは props の中身が空っぽ ({}) でした…
調査
ということで調べてみたらGitHub の Issueにこんなコメントを発見:
The guide you’re referring to refers to pages in src/pages. They automatically expose the frontmatter under pageContext.
However, it looks like you’re using a programmatically created page, so you’d need to pass the queried frontmatter directly into MDXRenderer to add it to the scope of MDX. It looks like that step is missing from the docs.
超意訳すると「src/page ディレクトリにMDXファイルがある場合は特に意識しなくても pageContext.frontmatter が使えるけど、そうじゃない場合は MDXRenderer に自分で追加してね。ドキュメントにはその辺書かれててないみたいだけど。てへ」ですかね。
確かにいま使ってる gatsby-starter-morning-dew は src/page じゃない…。ということで、ソースで MDXRenderer を扱っている部分を探して frontmatter の設定を書き加えたら上手くいきました。
まとめ
今日は溺死寸前でした。