DEV Community

loading...

Add a Published Field to Your Gatsby Posts to Control Their Visibility

Steven Mercatante
Hey, I'm Steven Mercatante and I build things for the web. I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
Originally published at stevenmercatante.com ・Updated on ・2 min read

The Problem

After converting my site to Gatsby, I quickly realized I needed a way to manage draft posts - pieces of writing I started, but for whatever reason weren't ready to be released publicly. Gatsby makes your posts public by default - as soon as you create that Markdown file and build your site, your post is available for all to see.

The Solution?

Easy! Throw a draft: true|false flag in the post's frontmatter, update the page query to only fetch pages where draft === false, and call it a day. Or, maybe not...

The Real Solution

The problem with the draft flag is that it's not explicit enough for this use case. The post will still be made public if I either forget to include the draft flag, or if it has a typo (e.g dratf: false).

Let's flip the conditional on its head and check if a published flag is true instead. What if I forget to add that flag, or have a typo (👋 publisehd)? The post doesn't appear until I fix the flag. This is a minor annoyance, but not as bad compared to if I accidentally publish something that isn't ready to be released.

The Code

Here's the frontmatter for this post - nothing crazy going on:

---
title: Manage Draft Posts in Gatsby
slug: '/manage-draft-posts-in-gatsby/'
tags: gatsby
published: false
---

And here's my page query:

query {
  allMdx(
    filter: { frontmatter: { published: { eq: true } } }
    sort: { fields: [frontmatter___date], order: DESC }
  ) {
    edges {
      node {
        fields {
          slug
        }
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          title
        }
      }
    }
  }
}

That frontmatter: { published: { eq: true } } line in the filter block is where the magic happens.

A few things to keep in mind:

  • you'll need to restart your Gatsby dev server after adding new fields to frontmatter before you can query them
  • adding a published flag has implications if you have Previous Article and Next Article links: you need to make sure you're not linking to unpublished articles. I'll show you how I handle that in the future article. Stay tuned, friends!

👋 Enjoyed this post?

Join my newsletter and follow me on Twitter @mercatante for more content like this.

Discussion (0)