exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  createTypes(`
  //Omitted
    type Frontmatter {
      date: String,
      rewritedAt: String,
      category: String,
      title: String,
    }
  `)
}

After adding this, stop the local server once, restart it, and rebuild.

gatsby develop

Confirm if the Field is Added

Check if rewritedAt is added to the frontmatter fields using GraphQL at

http://localhost:8000/___graphql.

Display the Data

Add to the Page Query in src/templates/post-template.js

Add rewritedAt to the frontmatter fields in the query.

export const query = graphql`
  query PostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      htmlAst
      frontmatter {
        date
        rewritedAt //added
        category
        title
      }
    }
  }
`

Use the Retrieved Data to Display the Dates

import React from "react"

const PostTemplate =  ({ data }) => {
  const post = data.post
  const { htmlAst } = post;
  const { tagSlugs, slug } = post.fields;
  // Add rewritedAt
  const { tags, title, date, rewritedAt } = post.frontmatter;

  // Format the dates for display
  const formatDate = dateString => {
    const date = new Date(dateString)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, "0")
    const day = String(date.getDate()).padStart(2, "0")
    return `${year}-${month}-${day}`
  }
  const d = date ? formatDate(date) : null //Publication date
  const r = rewritedAt ? formatDate(rewritedAt) : null //Last updated date

  return (
    <div className="flex flex-wrap text-md">
      {r ? (
        <p className="mr-4" style={{ marginTop: 0 }}>
          <time dateTime={rewritedAt} itemProp="dateModified">
            {r}
          </time>
        </p>
      ) : (
        ""
      )}
      <p style={{ marginTop: 0 }}>
        <time dateTime={date} itemProp="datePublished">
          {d}
        </time>
      </p>
    </div>
  )
});

export const query = graphql`
  query PostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      htmlAst
      frontmatter {
        date
        rewritedAt //added
        category
        title
      }
    }
  }
`

export default PostTemplate

Add to the Markdown File

Add the rewritedAt field to the .md file. If you don't add this field, it won't display.

---
title: Title
date: "2024-10-17T00:00:00Z"
rewritedAt: "2024-10-17T00:00:00Z"
---

That's it!

What is the `time` Tag?

The <time> HTML element represents a specific period in time. With the datetime attribute, you can specify a machine-readable date format, improving search engine results and supporting custom features like reminders.

Source: <time>: The Time Element

By using the time tag, you can communicate the last updated time with dateTime and itemProp.

<time dateTime={rewritedAt} itemProp="modified">
  {r}
</time>

Conclusion

That's how to display the last updated time of a blog post in Gatsby.js.

I hope this is helpful to someone!

Please Provide Feedback

We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!

How to Display the Last Updated Time of a Blog Post in Gatsby.js

Add to the GraphQL Schema

gatsby-node.js