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は削除しても問題なく動きます。

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

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

gatsbyの作業履歴

チュートリアル

Data in Gatsby

How Gatsby uses GraphQL

Create a new example site

Your first GraphQL query

Use a StaticQuery

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