GridsomeでUNIX Timestampを変換するには？

Gridsomeでは、日付のフォーマットにGraphQLのformatが使えますが、変換前のデータソースのフォーマットは「ISO 8601」であることが前提となっています。

GraphQLでは、日付形式のデータが入ってくると、自動で日付と推定してscalarを「Date」として挿入してくれますが、UNIX Timestampはただの数字なので、Intで収納されてしまいます。

ですので、記事の日付データがUNIX TimestampであるならVue.jsのテンプレート内で変換を行ってから表示するか、データソース側をUNIX TimestampからISO 8601フォーマットでGraphQLに収容する、もしくはmineTypeでscalarを指定するするしかありません。

articles.addNode({
  date: {
    mineType: 'Date',
    content: item._created
  }
}

ヘッドレスCMSなどからデータを引っ張ってきているのであれば、gridsome.server.jsで処理を書くので、そのついでにdayjsなどの日付ライブラリを使ってISO 8601フォーマットにするのが良いでしょう。

const dayjs = require('dayjs');

module.exports = function (api) {
  api.loadSource(async actions => {

    // 何かの処理

    // GraphQLへの挿入、_createdと_modifiedはUNIX Timestamp

    for (const item of dataArticles) {
      articles.addNode({
        id: item._id,
        date: dayjs.unix(item._created).toISOString(),
        updated: dayjs.unix(item._modified).toISOString()
      })
    }    
  }
}

Q. GridsomeでUNIX Timestampを変換するには？

GridsomeでUNIX Timestampを変換するには？

新着Q&A