
Posted on • Originally published atstevenmercatante.com
Publish Posts After a Date in Gatsby
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.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse