gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング

# gatsbyの作業履歴
[gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする](https://qiita.com/3S_Laboo/items/a38536ed1fb976303b47)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）](https://qiita.com/3S_Laboo/items/014ca205612f21d830aa)
[gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）](https://qiita.com/3S_Laboo/items/4a0f3fdf42c2aa466ed9)
[gatsby入門 チュートリアルをこなす 2.  ギャツビーのスタイリングの概要](https://qiita.com/3S_Laboo/items/41bb0f5f7cabecedc4c2)
[gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成](https://qiita.com/3S_Laboo/items/cc24aae21b22b936488d)
[gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)
[今回：gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング](https://qiita.com/3S_Laboo/items/c9a9a9c3c1e4d0851e6b)
[gatsby入門 チュートリアルをこなす 6.  変圧器プラグイン※Transformer pluginsのgoogle翻訳](https://qiita.com/3S_Laboo/items/226653c9f91cb3a217c7)
[gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する](https://qiita.com/3S_Laboo/items/f80d2c5a36207af71a01)
[gatsby入門 チュートリアルをこなす 8.  公開するサイトの準備](https://qiita.com/3S_Laboo/items/1f50c15a5eddbde6ad18)
[gatsby入門 ブログ作ってサーバーにアップしてみる](https://qiita.com/3S_Laboo/items/7c3ecb0f409fb143f367)
# チュートリアル
今回実施するgatsbyのチュートリアルはこちら
https://www.gatsbyjs.com/tutorial/part-five/
GraphQLとソースプラグインを使用してGatsbyサイトにデータを取り込む方法が理解できるよう。
そういえば[前回](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)GraphQLのことあんまりよく理解できなかったな。
まぁいいや。何事も突き進んだ後に理解している。それが俺のやり方。ソレガオレノヤリカタ。ｿﾚｶﾞｵﾚﾉﾔﾘｶﾀ。
早速やっていきましょう。
ソースは[前回](https://qiita.com/3S_Laboo/items/49f04f8c9da62a6058cf)作ったやつを使用します。
#Source Plugins
## Introducing GraphiQL
GraphiQLは、GraphQL統合開発環境（IDE）
以下にアクセスできると使用できます。
```http://localhost:8000/___graphql```
![2020-09-05_11h06_28.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/280753ef-ec88-7f31-6ca8-ea465eb50f00.jpeg)
アクセスできた。なんじゃこれ。
前回と似たようなクエリを作ってみる
site→siteMetadata→titleをチェックするとクエリが出来て実行すると、タイトルが取得できた！
![2020-09-05_11h10_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/74b4dc2d-1854-6e46-7cde-372998bf6e28.jpeg)
なるほどね、データ取得しやすいね。
SQLの構築と似てるな。複雑なことはできなさそう。
## Source plugins
何やらデータがいい感じにフェッチされるからgatsby-source-filesystemを追加して確認するみたい。
以下をプロジェクトのディレクトリで実行
```npm install --save gatsby-source-filesystem```
gatsby-config.jsを以下のように修正

```js:gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
  },
  plugins: [
    ↓ここから
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    ↑ここまで追記
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
```
再起動
![2020-09-05_11h26_46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/658b68c9-3d48-7f83-2a59-d8620a417bf0.jpeg)
ん？これ前からあったな。最近のgatsbyは標準装備かな？
allFileをクリックしてCtrl + Enterを押すと実行結果まで出てくる。
![2020-09-05_11h34_36.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/c63eab1a-1771-5f2f-f9e6-fbce42dc36c1.jpeg)
なんか出てきた。
accessTimeとbaseを選択し実行
![2020-09-05_11h35_40.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/a6d51b22-9ff6-49bf-e78f-39aa39788522.jpeg)
ファイル名と日付が出てきた！
## Build a page with a GraphQL query
チュートリアルに以下のような記載※たぶん重要
>Gatsbyを使用した新しいページの作成は、多くの場合、GraphiQLから始まります。まず、GraphiQLで遊んでデータクエリをスケッチし、それをReactページコンポーネントにコピーして、UIの構築を開始します。

※google翻訳です。
なるほど。
GraphQLを使って新しいページsrc/pages/my-files.jsを作ります。

```js:src/pages/my-files.js
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function MyFiles({ data }) {
  console.log(data)←これ大事
  return (
    <Layout>
      <div>Hello world</div>
    </Layout>
  )
}
↓これがgraphql
export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`
↑ここまで
```
画面表示でチュートリアルのログっぽいのが出てたからOKでしょ。
さらに修正

```js:src/pages/my-files.js
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function MyFiles({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>
        ↓ここから
        <h1>My Site `' s Files</h1>
        <table>
          <thead>
            <tr>
              <th>relativePath</th>
              <th>prettySize</th>
              <th>extension</th>
              <th>birthTime</th>
            </tr>
          </thead>
          <tbody>
            {data.allFile.edges.map(({ node }, index) => (
              <tr key={index}>
                <td>{node.relativePath}</td>
                <td>{node.prettySize}</td>
                <td>{node.extension}</td>
                <td>{node.birthTime}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      ↑ここまで修正
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`
```
![2020-09-05_21h24_53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/419552d4-198c-38b3-ef40-b5ecaf170947.jpeg)
OK出てきた出てきた。
繰り返し処理はラムダっぽい書き方するのね。
このチュートリアルは以上。

今回はここまで。

ありがとうございました。