GatsbyJSで下書きを導入

GatsbyJSで下書き機能を実装しました。 「Starter」は「gatsby-starter-blog」を想定しています。

記事の頭にキーを記述

下書きの記事のメタ情報にdraftのキーを書いておきます。

---
title: まだ下書き
date: "2023-01-23"
draft: true
---

gatsby-node.jsを編集

本番環境process.env.NODE_ENV === "production"のみ draft: true以外の記事を取得するようにフィルターをかけます。
※下記ではタグページ用のクエリにもフィルターをかけています。

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions
  // 本番環境のみdraft:trueではない記事のみ取得
  const draft = process.env.NODE_ENV === "production" ? ',filter: { frontmatter: { draft: { ne: true } } }' : ''
  // Get all markdown blog posts sorted by date
  const result = await graphql(`
    {
      postsRemark: allMarkdownRemark(
        sort: { frontmatter: { date: ASC } }
        ${draft}
        ,limit: 2000
        ) {
        nodes {
          id
          fields {
            slug
          }
          frontmatter {
            tags
          }
        }
      }
      tagsGroup: allMarkdownRemark(limit: 2000
        ${draft}
        ) {
        group(field: { frontmatter: { tags: SELECT }}) {
          fieldValue
        }
      }
    }
  `)

index.jsを編集

トップページの記事一覧でdraft: trueではない、! value.frontmatter.draftな記事を取得するようにします。

const BlogIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const posts = process.env.NODE_ENV === 'production' ? data.allMarkdownRemark.nodes.filter((value) => ! value.frontmatter.draft ) : data.allMarkdownRemark.nodes

同一ファイルの下部のクエリ文にdraftを追記して、上部のvalue.frontmatter.draftを見れるようにしておきます。 その他、タグページのような記事一覧を取得する所で、同じように「フィルタ」と「クエリ」をセットで編集しておきます。

export const pageQuery = graphql`
{
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      sort: { frontmatter: { date: DESC } }
      ) {
      nodes {
        excerpt
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          modified(formatString: "MMMM DD, YYYY")
          title
          description
          tags
          draft // 追記
        }

おわりに

正直gatsby-node.jsだけの編集でフィルタがかかるのでは？ と思うところがあったので、一覧の表示ページなど個別に編集しないといけないのは納得できていません。 Gatsbyの仕組み、Reactの仕組みが理解できれば納得できるのでしょうか。
gatsby-node.jsでWebページの作成部分を一元管理して、 ページ表示部ではそのデータを元に表示してくれたらありがたいと思ったのです。