DEV Community

Cover image for Gatsby - Add a Published Filter To Posts
Chris Otto
Chris Otto

Posted on • Originally published at chrisotto.dev on

Gatsby - Add a Published Filter To Posts

I like Dev.to’s published filter. It allows you to continue to write posts until they’re ready to be viewed by everyone. If you are not familiar with the feature; in the frontmatter of your post there is a boolean named published. If it’s set to false, the post is visible to you and people that have the link. Once it’s set to true then it is visible to the world!

I wanted to add that feature to my personal Gatsby site so that I can have articles in progress while not finishing them if I need to commit other changes. The one difference with my implementation is that the post won’t be available to the client at all until it is published. The outline for the change:

  • Update all existing posts have published: true in their frontmatter
  • Add/Update filters to Graphql queries throughout my site keying in on the field set to true
    • gatsby-config.js
    • gatsby-node.js
    • Pages
    • Templates

Applying the Updates 😎

Add published to the frontmatter

 tags: ['gatsby','react']
+ published: true
---
Enter fullscreen mode Exit fullscreen mode

This change was made to all existing posts so that right away the Graphql queries I update down the line return data. Also, I created a dummy post that had the published boolean set to false to verify that it was excluded from the list of posts.

Adding the filter to gatsby-config.js queries

Within my gatsby-config.js I have two queries. One query hooks up to the Algolia search for my site and the other populates the RSS feed. For both queries, I do not want posts that are not published to show up.

Algolia query

  allMdx(
    filter: {
      fields: { slug: { ne: null } },
      fileAbsolutePath: { regex: "/posts/"},
+ frontmatter: { published: { eq: true } }
    }
Enter fullscreen mode Exit fullscreen mode

RSS Feed

    frontmatter: {
      author: { ne: null },
+ published: { eq: true}
    }
Enter fullscreen mode Exit fullscreen mode

Apply filter to gatsby-node.js, components and templates

The createPages in gatsby-node.js function uses the query to find out which pages should be created in my case this applies to posts and pages. Applying the filter to the components and pages makes sure that the unpublished posts don’t creep in and cause errors because thereis no post page to route to.

gatsby-node

    allMdx(
+ filter: { fields: { slug: { ne: null } }, frontmatter: { published: { eq: true } } }
      sort: { fields: [fields___prefix], order: DESC }
      limit: 1000
    )
Enter fullscreen mode Exit fullscreen mode

Tag Page and Index Template

    posts: allMdx(
      filter: {
        fileAbsolutePath: { regex: "//posts/[0-9]+.*--/" }
+ frontmatter: { published: { eq: true } }
      }
Enter fullscreen mode Exit fullscreen mode

Tag Template

  query PostsByTag($tag: String) {
    allMdx(
      limit: 1000
      sort: { fields: [fields___prefix], order: DESC }
+ filter: { frontmatter: { tags: { in: [$tag] }, published: { eq: true } } }
    )
Enter fullscreen mode Exit fullscreen mode

Testing and Wrap Up 🙌

At this point all the changes have been made to test out the change. All existing posts should be present and flow through searching, post pages, tag pages and RSS feed, all except for the one dummy post. I did some smoke testing by navigating around the components and pages updated to ensure that everything was working as expected and all existing automated tests passed. Win-win. Now I can keep posts as a work in progress until they’re ready to be published and still get other development work merged in.

Do you filter out in progress work from your Gatsby site? What approach did you take?

Top comments (2)

Collapse
 
carolstran profile image
Carolyn Stransky

Thank you so much for writing this! Just opened a PR to add this to my company's website thanks to this post 🙌

Collapse
 
chrisotto profile image
Chris Otto

Thank you for the feedback! I'm glad it was able to help someone else out. 🎉