GatsbyのGraphQL機能を使ってみる


# GatsbyのGraphQL機能を使ってみる

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

## 前提事項

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

本記事はチュートリアル５章後にならい、`Strapi`から取得したデータを参照して表示させることを目的とした。
[参照：公式チュートリアル第５章](https://www.gatsbyjs.org/tutorial/part-five/)


## gatsby-source-strapi のインストール

```shell
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` に接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/e5f8ec2f-5881-9190-a96a-ce80c7450961.png)


Explorer に allStrapiPost が表示されていることを確認。

ここからクエリを作成し、ページを作っていく。

## クエリの作成

取得する項目を選択していく。

node のidとtitle を選択して、クエリを実行。ついでに`Code Exporter`を押すと、参考のソースをはいてくれる。便利。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/4d0f69ce-3208-3457-094b-04021327a3af.png)

`Strapi` の登録状況。１件しかいれていない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/6fc83a3c-8f18-a200-cecc-c81536c28a9d.png)

## 表示ページの作成

`Gatsby` の`src/pages/myPosts.js` を作成してコードを記述。

``` react
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
      }
    }
  }
`
```

## ページの確認

完成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/1720fb44-34fb-986f-6feb-5d45a1383de1.png)

試しに`Strapi`でポストを追加。合わせて表示項目に content を追記しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/62d7bbe6-8d42-1939-eae7-3f3c1e117b08.png)

```react
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
      }
    }
  }
`
```


さて、ページのほうですが、サイトジェネレータなのでこのままでは更新されません。
開発サーバを再起動して表示してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/f0bc05c9-0da8-96fa-5777-9bb1261f861b.png)

## おわりに

画像の参照方法やマークダウンで書いた記事の表示の方法がわかっていません。
react.js なので、URL を変換するなど、プログラムでなんとでもなるのでしょうが、スマートな書き方があるのか確認したいと思います。
今回の連携はページ生成時に取得する方法なので、動的に取得できるのかも確認していきたいと思います。