gatsby-plugin-draft

GatsbyJS Plugin for adding draft field to node.

This plugin adds draft field to decide whether publish to Gatsby's data system node. The MarkdownRemark type node which generated by gatsby-transformer-remark has frontmatter property. If frontmatter has date and the date value is after build date time, this plugin adds draft valued true to node field. If not, draft field value is false.

Install

# npm 
$ npm install gatsby-plugin-draft
 
# or yarn 
$ yarn add gatsby-plugin-draft

How to use

gatsby-config.js

You need to add gatsby-source-filesystem and gatsby-transformer-remark.

module.exports = {
  plugins: [
    'gatsby-source-filesystem',
    'gatsby-transformer-remark',
    'gatsby-plugin-draft'
  ],
};

gatsby-node.js

You can query like the following. The important thing is to add filter. That query results is only the post whose draft is false.

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  const templatePath = 'app/template/path';
 
  return graphql(
    `
      {
        site {
          siteMetadata {
            title
          }
        }
        allMarkdownRemark(
          filter: { fields: { draft: { eq: false } } } # add
        ) {
          edges {
            node {
              excerpt
              frontmatter {
                date
                title
              }
            }
          }
        }
      }
    `
  ).then(result => {
    result.data.allMarkdownRemark.edges.forEach(post => {
      // create page
      createPage({
        path: post.node.fields.slug,
        component: templatePath,
      });
    })
  });
};

pages/index.js

Add filter in each pages.

export const query = graphql`
  query IndexQuery {
    site {
      siteMetadata {
        title
      }
    }
    allMarkdownRemark(
      filter: { fields: { draft: { eq: false } } } # here
    ) {
      edges {
        node {
          excerpt
        }
      }
    }
  }
`;

Let's say you have the following content. If you run gatsby build on Feb 22. 2019, the First Post will be published, but Second-Post will not be published.

If you build on Feb 26. 2019, both post will be published.

---
id: 1
title: First Post
date: 2019-02-20
---
 
Published content.

---
id: 2
title: Second Post
date: 2019-02-25
---
 
Draft content.

Another Example. If a post has draft: true in frontmatter, the post is never published even if date is before build date time.

---
id: 3
title: Second Post
date: 2010-10-10
draft: true
---
 
Draft content, forever and ever!

Options

module.exports = {
  plugins: [
    'gatsby-source-filesystem',
    'gatsby-transformer-remark',
    {
      resolve: 'gatsby-plugin-draft',
      options: {
        /**
         * be added field name
         * Default is 'draft'
         **/
        fieldName: 'notReleased',
        /**
         * moment-timezone
         * Default is 'UTC'
         **/
        timezone: 'Asia/Tokyo',
        /**
         * publish draft posts
         * Default is 'false'
         **/
        publishDraft: process.env.NODE_ENV !== 'production',
      },
    },
  ],
};

publishDraft

If publishDraft is false, the posts which have draft field valued true does not published. So we can not edit watching that posts. This option is useful when we edit posts in development mode (gatsby develop).

npm