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:
---
slug: '/your-post-slug'
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):
{
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:
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:
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.
