This post was originally published atstevemerc.com

I like writing articles ahead of time and only have them listed on my site based on whether the current date is greater than or equal to the article'sdate attribute. This means I get to write a bunch of content at once, but release it over time so there's a constant stream of new material on my site without having to rush to write it the night before.

Note: This lesson builds upon my previousAdd a Published Field to Your Gatsby Posts to Control Their Visibility article.

The Solution

First, make sure your article/post/whatever has adate attribute in its frontmatter. For example, here's this post's frontmatter:

---title:Publish Posts Based After a Date in Gatsbydate:'2019-10-08'published:true---

I'm already filtering my query to check the article'spublished attribute, so I need to add an additional check against itsdate. Let's add a filter that only returns articles whosedate is less than or equal to the current date.

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

But now we've gotta pass in that$currentDate variable, so open up yourgatsby-node.js file and add the following:

// gatsby-node.jsexports.onCreatePage=({page,actions})=>{const{createPage,deletePage}=actionsdeletePage(page)createPage({...page,context:{...page.context,currentDate:getCurrentDate(),},})}

onCreatePage is provided by Gatsby and is called whenever new pages are created. By overriding it here, we can pass additional data (currentDate) via itscontext object that'll be made available to all downstream components.

Here's thegetCurrentDate implementation:

// gatsby-node.js/** * Returns the current date in YYYY-MM-DD format */functiongetCurrentDate(){constd=newDate()letmonth=(d.getMonth()+1).toString()if(month.length<2){month=`0${month}`}letday=d.getDate().toString()if(day.length<2){day=`0${day}`}return`${d.getFullYear()}-${month}-${day}`}

One More Thing...

In myAdd Previous and Next Article Buttons in Gatsby article I show how to add "Previous Article" and "Next Article" buttons that depend on thepublished flag. For this date filtering, I needed to update this to account for thedate constraint, so posts that are set to be released in the future don't appear in the pagination links before they're ready.

// gatsby-node.jsconstpublishedPosts=posts.filter(post=>{return(post.node.frontmatter.published===true&&newDate(post.node.frontmatter.date)<=newDate(getCurrentDate()))}).reduce((acc,post)=>{acc[post.node.fields.slug]=postreturnacc},{})

Wrapping Up

With this new logic in place, I can write as much content as I want and set it to publish on a certain date. The only thing I need to do is rebuild and deploy my site (I'm looking for a way to automate this...)

👋Enjoyed this post?

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