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

2020年09月05日

JavaScript JSX React gatsby

gatsbyの作業履歴

gatsby入門 チュートリアルをこなす 0.開発環境をセットアップする gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(1) gatsby入門 チュートリアルをこなす 1. ギャツビービルディングブロックについて知る(2) 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 前回作ったやつみたいに以下ファイル・ディレクトリをガンガン作成する。

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>
  )
}
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>
  )
}
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>
  )
}
import Typography from "typography"
import kirkhamTheme from "typography-theme-kirkham"

const typography = new Typography(kirkhamTheme)

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

起動 gatsby develop 2020-09-05_01h24_44.jpg ダーパンいっぱい。。。 2020-09-05_01h29_04.jpg

Your first GraphQL query

src/pages/index.jsとsrc/pages/about.jsの両方に以下のタイトル記述部分がある <h1>About Pandas Eating Lots</h1> これだとタイトルが変更になった場合、index.jsもabout.jsも直すことになります。 そんなことはせずに、タイトル情報を1箇所に保存して直すときはその1箇所のみ直すようしましょう。 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を修正

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 動いた。gatsby-config.jsのタイトルになってる。

Use a StaticQuery

StaticQueryはGatsby v2で導入された新しいAPIで、page以外のコンポーネント(layout.jsなど)でGraphQLクエリを介してデータを取得できるようになっています。 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 OK gatsby-config.jsのタイトルをPandas Eating Lotsに変更

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 2020-09-05_02h04_11.jpg いえい! src/pages/about.jsのgraphqlは削除しても問題なく動きます。

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


SaitoSystemService

埼玉在住のフリーランスSEです。 技術ブログや作品をここで紹介していきます。 よろしくお願いします。

Written by 齋藤 渓
埼玉在住のフリーランスSEです。技術ブログや作品をここで紹介していきます。よろしくお願いします。
Contact:
© 2020, 齋藤システムサービス by Gatsby