gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ

# 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-four/
gatsbyのデータが理解できるようです。
早速やっていきましょう。
#Data in Gatsby
GatsbyのデータレイヤーはGraphQLを利用しています。
GraphQLとはクエリ言語。。。まぁ、おいおいね。
とにかくいい感じにデータが扱えるぜってことだね。
ガンガン飛ばしてサンプルサイト作り！
#How Gatsby uses GraphQL
## Create a new example site
新しいサイト作りのため以下を実行 + プラグインをインストール
```gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world```
```cd tutorial-part-four```
```npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion @emotion/core```
前回作ったやつみたいに以下ファイル・ディレクトリをガンガン作成する。

```js:src/components/layout.js
import React from "react"
import { css } from "@emotion/core"
import { Link } from "gatsby"

import { rhythm } from "../utils/typography"

export default function Layout({ children }) {
  return (
    <div
      css={css`
        margin: 0 auto;
        max-width: 700px;
        padding: ${rhythm(2)};
        padding-top: ${rhythm(1.5)};
      `}
    >
      <Link to={`/`}>
        <h3
          css={css`
            margin-bottom: ${rhythm(2)};
            display: inline-block;
            font-style: normal;
          `}
        >
          Pandas Eating Lots
        </h3>
      </Link>
      <Link
        to={`/about/`}
        css={css`
          float: right;
        `}
      >
        About
      </Link>
      {children}
    </div>
  )
}
```

```js:src/pages/index.js
import React from "react"
import Layout from "../components/layout"

export default function Home() {
  return (
    <Layout>
      <h1>Amazing Pandas Eating Things</h1>
      <div>
        <img
          src="https://2.bp.blogspot.com/-BMP2l6Hwvp4/TiAxeGx4CTI/AAAAAAAAD_M/XlC_mY3SoEw/s1600/panda-group-eating-bamboo.jpg"
          alt="Group of pandas eating bamboo"
        />
      </div>
    </Layout>
  )
}
```

```js:src/pages/about.js
import React from "react"
import Layout from "../components/layout"

export default function About() {
  return (
    <Layout>
      <h1>About Pandas Eating Lots</h1>
      <p>
        We're the only site running on your computer dedicated to showing the
        best photos and videos of pandas eating lots of food.
      </p>
    </Layout>
  )
}
```

```js:src/utils/typography.js
import Typography from "typography"
import kirkhamTheme from "typography-theme-kirkham"

const typography = new Typography(kirkhamTheme)

export default typography
export const rhythm = typography.rhythm
```

```js:gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
```
起動
```gatsby develop```
![2020-09-05_01h24_44.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/2984cddc-d9e4-59b9-0957-14032706b2a3.jpeg)
ダーパンいっぱい。。。
![2020-09-05_01h29_04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/c5526fe2-276c-857d-00ad-f2b36f9ffe0c.jpeg)
## Your first GraphQL query
src/pages/index.jsとsrc/pages/about.jsの両方に以下のタイトル記述部分がある
```<h1>About Pandas Eating Lots</h1>```
これだとタイトルが変更になった場合、index.jsもabout.jsも直すことになります。
そんなことはせずに、タイトル情報を１箇所に保存して直すときはその１箇所のみ直すようしましょう。
gatsby-config.jsを修正

```js:gatsby-config.js
module.exports = {
  ↓ここから
  siteMetadata: {
    title: `Title from siteMetadata`,
  },
  ↑ここまで追記
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
```

src/pages/about.jsを修正

```js:src/pages/about.js
import React from "react"
import { graphql } from "gatsby"←これ追加
import Layout from "../components/layout"

export default function About({ data }) {←これ修正
  return (
    <Layout>
      <h1>About {data.site.siteMetadata.title}</h1>←これ修正
      <p>
        We're the only site running on your computer dedicated to showing the
        best photos and videos of pandas eating lots of food.
      </p>
    </Layout>
  )
}
↓ここから
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`
↑ここまで追記
```
![2020-09-05_01h43_55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/34e67363-7cd8-31c2-7d39-957acd25358e.jpeg)
動いた。gatsby-config.jsのタイトルになってる。
### Use a StaticQuery
StaticQueryはGatsby v2で導入された新しいAPIで、page以外のコンポーネント（layout.jsなど）でGraphQLクエリを介してデータを取得できるようになっています。
src/components/layout.jsを以下のように修正

```js:src/components/layout.js
import React from "react"
import { css } from "@emotion/core"
import { useStaticQuery, Link, graphql } from "gatsby"←ここ修正

import { rhythm } from "../utils/typography"
export default function Layout({ children }) {
↓ここから
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
↑ここまで追記
  return (
    <div
      css={css`
        margin: 0 auto;
        max-width: 700px;
        padding: ${rhythm(2)};
        padding-top: ${rhythm(1.5)};
      `}
    >
      <Link to={`/`}>
        <h3
          css={css`
            margin-bottom: ${rhythm(2)};
            display: inline-block;
            font-style: normal;
          `}
        >
          {data.site.siteMetadata.title}←ここ修正
        </h3>
      </Link>
      <Link
        to={`/about/`}
        css={css`
          float: right;
        `}
      >
        About
      </Link>
      {children}
    </div>
  )
}
```
![2020-09-05_02h00_34.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/f59dbcb3-0a59-99be-2dda-8d7410ead846.jpeg)
OK
gatsby-config.jsのタイトルをPandas Eating Lotsに変更

```js:gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Title from siteMetadata`,
  },
  plugins: [
    `Pandas Eating Lots`,←ここ修正
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
```
![2020-09-05_02h03_48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/2c83a46e-cbd1-c020-d0ef-acdfa705125d.jpeg)
![2020-09-05_02h04_11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567235/1f39ecb5-1c5b-2156-5dae-2029bd8254f0.jpeg)
いえい！
src/pages/about.jsのgraphqlは削除しても問題なく動きます。

今回はここまで。
ありがとうございました。