GatsbyのGraphQL機能を使ってみる
勉強のためにチュートリアルを確認し Strapi
から記事表示したので、メモ書き。
前提事項
インストール手順は公式サイトを参照。
公式のチュートリアル4章までを読んでおくこと。
本記事はチュートリアル5章後にならい、Strapi
から取得したデータを参照して表示させることを目的とした。
参照:公式チュートリアル第5章
gatsby-source-strapi のインストール
npm install --save gatsby-source-strapi
gatsby-config.js への追記
プラグインを読み込むように設定する。
contentType には Straip
で作成して公開しているコンテンツタイプを指定する。
{
resolve: `gatsby-source-strapi`,
options: {
apiURL: `http://localhost:1337`,
contentTypes: [
`post`,
],
},
},
GraphiQL の起動
ブラウザで http://localhost:8000/___graphql
に接続
Explorer に allStrapiPost が表示されていることを確認。
ここからクエリを作成し、ページを作っていく。
クエリの作成
取得する項目を選択していく。
node のidとtitle を選択して、クエリを実行。ついでにCode Exporter
を押すと、参考のソースをはいてくれる。便利。
Strapi
の登録状況。1件しかいれていない。
表示ページの作成
Gatsby
のsrc/pages/myPosts.js
を作成してコードを記述。
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function MyPosts({ data }) {
console.log(data)
return (
<Layout>
<div>
<h1>My Site's Files</h1>
<table>
<thead>
<tr>
<th>id</th>
<th>title</th>
</tr>
</thead>
<tbody>
{data.allStrapiPost.nodes.map( (node) => (
<tr key={node.id}>
<td>{node.id}</td>
<td>{node.title}</td>
</tr>
))}
</tbody>
</table>
</div>
</Layout>
)
}
export const query = graphql`
{
allStrapiPost {
nodes {
id
title
}
}
}
`
ページの確認
完成
試しにStrapi
でポストを追加。合わせて表示項目に content を追記しました。
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default function MyPosts({ data }) {
console.log(data)
return (
<Layout>
<div>
<h1>My Site's Files</h1>
<table>
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>content</th>
</tr>
</thead>
<tbody>
{data.allStrapiPost.nodes.map( (node) => (
<tr key={node.id}>
<td>{node.id}</td>
<td>{node.title}</td>
<td>{node.content}</td>
</tr>
))}
</tbody>
</table>
</div>
</Layout>
)
}
export const query = graphql`
{
allStrapiPost {
nodes {
id
title
content
}
}
}
`
さて、ページのほうですが、サイトジェネレータなのでこのままでは更新されません。
開発サーバを再起動して表示してみます。
おわりに
画像の参照方法やマークダウンで書いた記事の表示の方法がわかっていません。
react.js なので、URL を変換するなど、プログラムでなんとでもなるのでしょうが、スマートな書き方があるのか確認したいと思います。
今回の連携はページ生成時に取得する方法なので、動的に取得できるのかも確認していきたいと思います。