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

gatsbyの作業履歴

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする
gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（１）
gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る（２）
gatsby入門 チュートリアルをこなす 2. ギャツビーのスタイリングの概要
gatsby入門 チュートリアルをこなす 3. ネストされたレイアウトコンポーネントの作成
今回：gatsby入門 チュートリアルをこなす 4. ギャツビーのデータ
gatsby入門 チュートリアルをこなす 5. ソースプラグインとクエリされたデータのレンダリング
gatsby入門 チュートリアルをこなす 6. 変圧器プラグイン※Transformer pluginsのgoogle翻訳
gatsby入門 チュートリアルをこなす 7. プログラムでデータからページを作成する
gatsby入門 チュートリアルをこなす 8. 公開するサイトの準備
gatsby入門 ブログ作ってサーバーにアップしてみる

チュートリアル

今回実施する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
前回作ったやつみたいに以下ファイル・ディレクトリをガンガン作成する。

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>
  )
}

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>
  )
}

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>
  )
}

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

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

起動
gatsby develop

ダーパンいっぱい。。。

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を修正

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を修正

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
      }
    }
  }
`
↑ここまで追記

動いた。gatsby-config.jsのタイトルになってる。

Use a StaticQuery

StaticQueryはGatsby v2で導入された新しいAPIで、page以外のコンポーネント（layout.jsなど）でGraphQLクエリを介してデータを取得できるようになっています。
src/components/layout.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>
  )
}

OK
gatsby-config.jsのタイトルをPandas Eating Lotsに変更

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Title from siteMetadata`,
  },
  plugins: [
    `Pandas Eating Lots`,←ここ修正
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

いえい！
src/pages/about.jsのgraphqlは削除しても問題なく動きます。

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