【Gatsby.js】jsonファイルのデータをGraphQL経由で取得する
この記事ではjsonファイルからGraphQL経由でデータを取得し、ページ内で利用する方法を紹介します。
jsonファイルを元に、複数ページを生成する方法を知りたい場合は昨日書いた以下の記事を参照。
【Gatsby.js】単一のjsonファイルを元に複数のページを生成する - Qiita
jsonファイルを配置
$ mkdir src/data
$ touch src/data/events.json
[
{
"title": "Gatsby勉強会",
"date": "2020/10/01"
},
{
"title": "React勉強会",
"date": "2020/11/01"
},
{
"title": "JavaScript勉強会",
"date": "2020/12/01"
}
]
プラグインをインストール
$ yarn add gatsby-transformer-json gatsby-source-filesystem
module.exports = {
plugins: [
`other-plugin-hoge`,
//追記↓
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `data`,
path: `${__dirname}/src/data/`,
},
},
],
}
クエリを作成
gatsby develop
で開発サーバーを起動し、http://localhost:8000/___graphql?query にアクセスしGraphiQLを開く。
まずはroot?にallEventsJson
という項目が追加されていることを確認。
allEventJson > edges > node
を開き、title
とdate
にチェックを入れてクエリを発行。
データを使いたいページ内で、データを取得
ここではsrc/pages/events.js
というページでデータを利用します。
$ touch src/pages/events.js
import React from "react"
import { graphql, useStaticQuery } from "gatsby"
export default () => {
const data = useStaticQuery(graphql`
query {
allEventsJson {
edges {
node {
date
title
}
}
}
}
`)
const events = data.allEventsJson.edges
return (
<div>
{events.map(e => (
<div>
<h2>{e.node.title}</h2>
<p>{e.node.date}</p>
</div>
))}
</div>
)
}
結果
参考
Author And Source
この問題について(【Gatsby.js】jsonファイルのデータをGraphQL経由で取得する), 我々は、より多くの情報をここで見つけました https://qiita.com/d0ne1s/items/2e519907918b26c7a3d7著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .