記事の公開日とは別に最終更新日を表示する方法です。

実現したいこと

• 記事の公開日とは別に更新日を表示する

記事のMarkdownファイルに最終更新日のフィールドを追加する

modifieddate の部分は好きな文字列に変えても問題ありません。

/** post.md */

date: "2019-06-02"
modifieddate: "2019-10-02" /* 追加 */

表示させたいページのテンプレートのGraphQLに追加する

Markdownファイルに追加した modifieddate をGraphQLで取得します。

query {
  markdownRemark {
    edges {
      node {
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          modifieddate(formatString: "MMMM DD, YYYY") /* 追加 */
        }
      }
    }
  }
}

(formatString: "MMMM DD, YYYY") の部分は日付の形式のフォーマット用の記述です。
通常 2019-10-02 と表示されるところを下記の場合、 October 02, 2019 と表示されます。

表示させたいページのテンプレート（コンポーネント）で読み込む

以下は当ブログの記事詳細ページでの表示の例です。 日付表示以外の部分は省略しています。

/** post.js（記事ページテンプレート） */

import React from "react";
import PostDetail from "../components/PostDetail";

const PostTemplate = (props) => {
  return <PostDetail {...props} />;
};

/** PostDetail.js（記事詳細ページ） */

import React from "react";

const PostDetail = props => {
  const postNode = props.data.markdownRemark;
  const post = postNode.frontmatter;

  return (
    <p>公開日 : {post.date}</p>
    <p>最終更新日 : {post.modifieddate}</p>
  );
}

export default PostDetail;

参照

• How to get ‘Last Update Date’ of a blog post in GATSBY.js https://stackoverflow.com/questions/56025679/how-to-get-last-update-date-of-a-blog-post-in-gatsby-js （2021-1-5参照）