[{"data":1,"prerenderedAt":105},["ShallowReactive",2],{"legacy-question-dc5f28776c305748b49f684587cb222b":3,"legacy-question-author-koji-kadoma":78,"legacy-question-category-website-building":94},{"id":4,"title":5,"author":6,"body":7,"category":64,"date":65,"description":66,"extension":67,"locale":68,"meta":69,"navigation":70,"path":71,"seo":72,"slug":73,"stem":74,"tag":75,"updated":65,"__hash__":77},"legacyQuestions\u002F20210901010000-GridsomeでAPIから読み込んだデータにrefをつけるには？.md","GridsomeでUNIX Timestampを変換するには？","koji-kadoma",{"type":8,"value":9,"toc":60},"minimark",[10,14,18,27,30,37,40,51,54],[11,12,5],"h2",{"id":13},"gridsomeでunix-timestampを変換するには",[15,16,17],"p",{},"Gridsomeでは、日付のフォーマットにGraphQLのformatが使えますが、変換前のデータソースのフォーマットは「ISO 8601」であることが前提となっています。",[15,19,20],{},[21,22,26],"a",{"href":23,"rel":24},"https:\u002F\u002Fja.wikipedia.org\u002Fwiki\u002FISO_8601",[25],"nofollow","ISO 8601 | Wikipedia",[15,28,29],{},"GraphQLでは、日付形式のデータが入ってくると、自動で日付と推定してscalarを「Date」として挿入してくれますが、UNIX Timestampはただの数字なので、Intで収納されてしまいます。",[15,31,32],{},[21,33,36],{"href":34,"rel":35},"https:\u002F\u002Fgraphql.org\u002Flearn\u002Fschema\u002F",[25],"Schemas and Types | GraphQL.org",[15,38,39],{},"ですので、記事の日付データがUNIX TimestampであるならVue.jsのテンプレート内で変換を行ってから表示するか、データソース側をUNIX TimestampからISO 8601フォーマットでGraphQLに収容する、もしくはmineTypeでscalarを指定するするしかありません。",[41,42,47],"pre",{"className":43,"code":45,"language":46},[44],"language-text","articles.addNode({\n  date: {\n    mineType: 'Date',\n    content: item._created\n  }\n}\n","text",[48,49,45],"code",{"__ignoreMap":50},"",[15,52,53],{},"ヘッドレスCMSなどからデータを引っ張ってきているのであれば、gridsome.server.jsで処理を書くので、そのついでにdayjsなどの日付ライブラリを使ってISO 8601フォーマットにするのが良いでしょう。",[41,55,58],{"className":56,"code":57,"language":46},[44],"const dayjs = require('dayjs');\n\nmodule.exports = function (api) {\n  api.loadSource(async actions => {\n\n    \u002F\u002F 何かの処理\n\n    \u002F\u002F GraphQLへの挿入、_createdと_modifiedはUNIX Timestamp\n\n    for (const item of dataArticles) {\n      articles.addNode({\n        id: item._id,\n        date: dayjs.unix(item._created).toISOString(),\n        updated: dayjs.unix(item._modified).toISOString()\n      })\n    }    \n  }\n}\n",[48,59,57],{"__ignoreMap":50},{"title":50,"searchDepth":61,"depth":61,"links":62},2,[63],{"id":13,"depth":61,"text":5},"website-building","2021-09-01T02:00:00.000Z","Cockpit APIのアクセス結果が「Collection not found」になる","md","ja",{},true,"\u002F20210901010000-gridsomeapiref",{"title":5,"description":66},"dc5f28776c305748b49f684587cb222b","20210901010000-GridsomeでAPIから読み込んだデータにrefをつけるには？",[76],"gridsome","D9FssWhmkA7uAY7LdXtxRv0lmcvoHZJeT6MKEe6dJFc",{"id":79,"title":80,"body":81,"date":85,"description":86,"extension":67,"locale":68,"meta":87,"name":90,"navigation":70,"path":91,"seo":92,"slug":6,"stem":6,"updated":85,"__hash__":93},"legacyAuthors\u002Fkoji-kadoma.md","Koji Kadoma",{"type":8,"value":82,"toc":83},[],{"title":50,"searchDepth":61,"depth":61,"links":84},[],"2021-04-01T00:00:00.000Z","Webエンジニアです。Javascript、PHP、Ruby、Dockerなどをメインで使っています。",{"image":88,"url":89},"https:\u002F\u002Fwww.codit.work\u002Fimgs\u002Favatar\u002Fkoji-kadoma.png","https:\u002F\u002Fkoji.pages.dev\u002F",null,"\u002Fkoji-kadoma",{"title":80,"description":86},"H1yaGicrsv1CzYTbFeEXQosuYx93lIutD3_XwXMhAFk",{"id":95,"title":96,"body":97,"date":85,"description":96,"extension":67,"locale":68,"meta":101,"navigation":70,"path":102,"seo":103,"slug":64,"stem":64,"updated":85,"__hash__":104},"legacyCategories\u002Fwebsite-building.md","Webサイト構築",{"type":8,"value":98,"toc":99},[],{"title":50,"searchDepth":61,"depth":61,"links":100},[],{},"\u002Fwebsite-building",{"title":96,"description":96},"h9jPLD2mzMm3L4sFN5qWSiSirySQQLdnxLhQcvw8VlQ",1783320299783]