Formatting dates in Gatsby with GraphQL

Updated: May 27 2021

Perhaps the easiest way to format dates in Gatsby is at query-time using Gatsby’s GraphQL layer.

{
  date(formatString: "MMMM Do, YYYY")
}

cmd + click on the formatString function in your query to open the schema documentation explorer.

You’ll see the date is formatted using Moment.js date tokens.

Head to the MomentJS docs to see the various format options.

For a current project I’m using a fairly minimal config.

{
  date(formatString: "DD MMM")
}

Which prints out something along the lines of:

25 Jul.

Adding the time #

For another project I needed to grab the time, not just the date.

{
  date(formatString: "dddd MMMM Do, YYYY hh:mma")
}

This returns something along the lines of:

Thursday January 16th, 2020

Further reading #

Monthly Newsletter

Once a month I curate a newletter for designers and developers interested in static sites, CSS and web performance. Check out past issues to get an idea.