Formatting dates in Gatsby with GraphQL

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 #

• GraphQL Concepts – Formatting dates from Gatsby Docs.
• GraphQL Reference - Dates from Gatsby Docs.
• Moment.js Display formats