March 09, 2022

Gatsbyで数種類のMarkdownを階層で使い分ける

Gatsby.js¹でmarkdownをブログ以外のページのために使用したかった。 ただ、markdownのfrontmatterの部分の構造が違うので一緒のクエリの結果に含めたくなく²、クエリの条件かそれ以前の仕組みで分割したかった。 blogsフォルダに分けてmarkdownを置いてあるのでわざわざファイル名にblogとかそういう文字を含めて検索などはしたくもなかった。

GraphiQLのexplorerを眺めてたらfileAbsolutePath というのを見つけた。 これのfilterで正規表現の絞り込みができるregexをパラメータとして使えたのでこれでフォルダの階層を使って絞り込むことができた。

query BlogsQuery {
  allMdx(filter: {fileAbsolutePath: {regex: "/blogs/"}}) {
    nodes {
      frontmatter {
        title
      }
    }
  }
}

regex以外にも絞り込み条件があったけど今回のケースだとつかえなさそうだった。

• https://www.gatsbyjs.com/docs/graphql-reference/#complete-list-of-possible-operators

/blogs/みたいに/も条件に入れておくと/blogs~みたいなmarkdownの時に誤って引っかかることがないので良さそう。

他にもconfigでmarkdownが置いてある各階層にラベルをつけるやり方もあるみたいだけどこっちの方が簡単なので採用。