Add a Published Filter To Your Gatsby MDX Posts

Updated: October 3, 2020

A published filter is a great feature to filter your draft post, so that you can keep working on a it until it's ready to be shared with everyone. We can implement this feature by adding a boolean value named published in the frontmatter of your post. If we set this boolean to true, the post will be visible to the world! Otherwise, the post is visible only to you.

Let's implement this feature in a Gatsby post.

Add published to the frontmatter

We can start by adding the published boolean to the frontmatter of all our existing posts:

the-best-post-ever.md
---
slug: "/the-best-post-ever"
date: "2020-09-01"
published: true
title: "The best post ever"
---

Adding the filter to the GraphQL queries

Once we have added the boolean value to all our post, we need to update the GraphQL queries in order to filter out any post where published is set to false.

Inside your gatsby-node.js file, update the queries that fetch your MDX posts and the one for your tags (if you have this feature implemented on your website):

gatsby-node.js
{
  allMdx(filter: { frontmatter: { published: { eq: true } } }) {
    edges {
      node {
        excerpt
        frontmatter {
          title
          slug
          date(formatString: "MMMM DD, YYYY")
          tags
        }
      }
    }
  }
  tagsGroup: allMdx(
    filter: { frontmatter: { published: { eq: true } } }
    limit: 2000
  ) {
      group(field: frontmatter___tags) {
        fieldValue
      }
    }
}

Additionally, if you have an RSS Feed integrated into your website, you need to modify also the gatsby-config.js file:

gatsby-config.js
feeds: [
  {
    // ...
    query: `
      {
        allMdx(
          sort: { order: DESC, fields: [frontmatter___date] },
          filter: { frontmatter: { published: { eq: true } } }
        ) {
          edges {
            node {
              excerpt
              html
              frontmatter {
                title
                slug
                date(formatString: "MMMM DD, YYYY")
              }
            }
          }
        }
      }
    `,
    // ...
  },
],

Once we have updated the GraphQL queries contained into the Gatsby configuration files, it's time to update the query that fetches for our posts inside the postTemplate file:

postTemplate.js
export const getPosts = graphql`
  query getPosts($skip: Int!, $limit: Int!) {
    allMdx(
      limit: $limit
      skip: $skip
      sort: { order: DESC, fields: [frontmatter___date] }
      filter: { frontmatter: { published: { eq: true } } }
    ) {
      edges {
        node {
          excerpt
          frontmatter {
            title
            slug
            date(formatString: "MMMM DD, YYYY")
            tags
          }
        }
      }
    }
  }
`;

Finally, for those of you who have integrated tags and categories into your website, remember to update also the GraphQL queries inside your tags.js page and tagTemplate component.