Gatsby にドラフト機能を追加する

Gatsby スキーマにデフォルト値を追加する方法については、インターネット上に多くのガイドがあります.まだ作業中の投稿を非表示にするためのフロントマターの下書きエントリ.ただし、これらのソリューションはすべて、たとえば、環境変数を使用したり、フロントマターごとにドラフトエントリを定義したりする必要があるため、ちょっとハックです. Gatsby はその schema customization API を実装したので、簡単な解決策 (ハックではありません!) が利用可能です.最も重要な点: この簡単なヒントは、マークダウン (およびそのフロントマター) だけでなく、使用しているすべてのデータ ソースに適用できます.

コードサンドボックス gatsby-draft-default-values を見て、最小限の例で動作するコードを確認できます.

例に沿って従う場合は、 gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog で gatsby-cli を実行して、デフォルトのブログ スターターをインストールできます.

設定

デフォルトのブログスターターはコンテンツにマークダウンを使用し、マークダウンファイルでいわゆるフロントマターを使用して、追加のデータを定義できます.下書きステータス (true または false).目標は、このドラフト ステータスのデフォルト値を定義して、すべてのマークダウン ファイルで定義する必要がなく、ドラフトにしたいものだけで定義することです.

これを既存の gatsby-node.js ファイルに追加します.

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes, createFieldExtension } = actions

  createFieldExtension({
    name: "defaultFalse",
    extend() {
      return {
        resolve(source, args, context, info) {
          if (source[info.fieldName] == null) {
            return false
          }
          return source[info.fieldName]
        },
      }
    },
  })

  createTypes(`
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      draft: Boolean @defaultFalse
    }
  `)
}

createTypes 関数では、ドラフト フィールドを入力できるように、MarkdownRemark 型 (詳細については Nested types を参照) でネストされた型を定義する必要があります.ドラフト フィールド自体では、カスタム拡張機能がディレクティブとして使用されます.このディレクティブを使用すると、このアクションを他のフィールドでも再利用できます. CMS またはマークダウン以外のデータソースを使用している場合は、これを機能させるために ( MarkdownRemark の代わりに) タイプを見つけて定義する必要があります.名前がわからない場合は、GraphiQL ( localhost:8000/___graphql ) を使用することをお勧めします.

@defaultFalse ディレクティブを使用できるようにするには、 createFieldExtension でカスタム拡張を定義する必要があります. source には、frontmatter のすべてのフィールドが含まれています (この場合は、タイトル、説明、日付、およびドラフト). info.fieldName は、ディレクティブを適用するフィールドの名前です.この場合は draft です.提供されていないフィールドはデフォルトで null ですが、draft はブール値である必要があるため、この場合は false を返す必要があります.提供されている場合は、単に値を返します.

Creating type definitions の完全なガイドを読んで、このように機能する方法と理由についての詳細な知識を得てください.

使用法

下書きフィールドが設定され、デフォルトが false になったので、ブログ投稿の前付に draft: true を追加できます.

---
title: "My Second Post!"
date: "2015-05-06T23:46:37.121Z"
draft: true
---

GraphiQL を開くと、ドラフト フィールドを照会してフィルター処理できるようになります.下書きではないすべてのマークダウン投稿を一覧表示するクエリは次のようになります.

query {
  allMarkdownRemark(filter: { frontmatter: { draft: { eq: false } } }) {
    nodes {
      frontmatter {
        title
        description
        date
        draft
      }
    }
  }
}