Drafting in Gatsby

So now that I've committed to writing a blog post a day as I work through challenges, the first challenge I stumbled upon was how to write drafts on this new blog I created using Gatsby.

I found this plugin.

https://www.gatsbyjs.org/packages/gatsby-plugin-draft/

I think for my needs it gets the job done.

yarn add gatsby-plugin-draft

Configure the plugin in gatsby-config.js.

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

and in gatsby-node.js: (NOTE: This step keeps pages from actually generating, you could also just hide them from the index but then if someone stumbled upon your slug uri they would still render :P)

 exports.createPages = async ({ graphql, actions }) => {
    // **Note:** The graphql function call returns a Promise
    // see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise for more info
    const { createPage } = actions;
    const result = await graphql(`
      query {
        allMarkdownRemark(
          filter: { fields: { draft: { eq: false } } } # add
        ){
          edges {
            node {
              fields {
                slug
              }
            }
          }
        }
      }
    `)
    
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
          path: node.fields.slug,
          component: path.resolve(`./src/templates/blog-post.js`),
          context: {
            // Data passed to context is available
            // in page queries as GraphQL variables.
            slug: node.fields.slug,
          },
        })
      })

  }

And to filter them out of the index page, add the same filter to that pages GraphQL page query:

...

export const query = graphql`
  query {
    allMarkdownRemark(
      sort: { fields: [frontmatter___date], order: DESC },
      filter: { fields: { draft: { eq: false } } }

      ) {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          fields {
            slug
          }
          excerpt
        }
      }
    }
  }
`

There you have it.