引き続きGatsby+Contentfulの開発中。いやー楽しい。ブログやWEBメディアに必要な機能は概ね関数やプラグインが用意されてるし、Wordpressプラグインのようなカスタマイズ性の悪さも感じない。

今回は記事に表示する日付について。Contentfulでは記事を作成する際、こちら側でContent Modelを用意しなくても、自動で作成日などが生成される。

もちろんGatsby側でGraphQLを利用して取得・表示ができるので、その日付型の変換方法についてまとめておく。

取得できる記事の日付のフィールド名

デフォルトでは2種類の日付フィールド（作成日と更新日）が存在する。

記事の作成日を取得するGraphQLクエリは下記。

allContentfulBlogArticle {
    edges {
        node {
            createdAt
        }
    }
}
</code></pre>
<p><strong>記事の更新日</strong>の取得はこちら。</p>
<pre><code>edges {
    node {
        updatedAt
    }
}

ちなみに「公開日（PublishedAt）」はデフォルトでは存在しないので、必要な場合は自分でContent Modelに追加する必要がある。

デフォルトの日付型

上記クエリをそのままフロントに投げると…

2020-06-11T09:29:41.084Z

のような表示になる。

時間なども含まれているのはいいんだけど、可読性がよくないので、このフォーマットを変換していく。

日付型の変換クエリ

日付のフォーマットはクエリを投げる時点で指定する。

例えば「2020年02月20日」としたい場合、GraphQLに投げるクエリは下記のようになる。

export const query = graphql`
    query BlogArticleQueryTop {
        allContentfulBlogArticle(filter: {node_locale: {eq: "ja-JP"}}) {
            edges {
                node {
                    createdAt(formatString: "YYYY年MM月DD日")
                }
            }
        }
    }
`;

「May 28, 2020」としたい場合は下記。

createdAt(formatString: "MMMM DD, YYYY")

わかりやすっ！

一つのフィールドを複数のフォーマットで取得する

そして日付を複数の日付型に変換したい場合、エイリアスでクエリを書くことで同じフィールドでも複数のフォーマットで取得ができる。

createdAt: createdAt(formatString: "YYYY/MM/DD")
createdTime: createdAt(formatString: "H:m:s")

ビューが汚れないし書きやすいしこの記法好きだなー。