GatsbyのGraphQL機能を使ってみる

12720 ワード
gatsby React strapi React テキストリンク

GatsbyのGraphQL機能を使ってみる

勉強のためにチュートリアルを確認し Strapi から記事表示したので、メモ書き。

前提事項

インストール手順は公式サイトを参照。
公式のチュートリアル４章までを読んでおくこと。

本記事はチュートリアル５章後にならい、Strapiから取得したデータを参照して表示させることを目的とした。
参照：公式チュートリアル第５章

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 の登録状況。１件しかいれていない。

表示ページの作成

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 を変換するなど、プログラムでなんとでもなるのでしょうが、スマートな書き方があるのか確認したいと思います。
今回の連携はページ生成時に取得する方法なので、動的に取得できるのかも確認していきたいと思います。