Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for Publish Posts After a Date in Gatsby
Steven Mercatante
Steven Mercatante

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Hey, I'm Steven Mercatante and I build things for the web.I'm a full stack software engineer with over 15 years of experience building websites, mobile apps, APIs, CMSs, and ETL pipelines.
  • Joined

More fromSteven Mercatante

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp