Gatsby触ってみる【データレイヤ編】

2021/01/17

Gatsby触ってみる【プラグイン･レイアウト編】の続きからGatsbyチュートリアル進めていきます。

4. Data in Gatsby(ギャツビーのデータ)

データをどうやって取得してくるか？のチュートリアルです。

GatsbyではGraphQLを使用しています。
正直,GraphQLの名前はよく聞くけど,いまいち何なのか理解していませんでした。
さらっと調べたところ,RESTとかと同列で,APIの設計モデルと言う解釈でひとまずいいですかね？
RESTがHTTPメソッドベースなのに対して,GraphQLはクエリベースって認識です。
間違ってたら教えてほしいです。詳しい人。

Gatsbyにおける｢データ｣とはReactコンポーネントの外にあるもの全てのことを指します。
GraphQLで外部からデータを取得する手順として, ますプラグインライブラリから使用したいソースプラグインやトランスフォーマープラグインがすでに存在するか確認する必要があります。
ない場合は自分で作ってねって公式に書いてありますw

ちなみに非構造化データの場合(データが構造化されていない小さめのサイトとか)はGraphQLは使わずに node createPagesAPI を使用してGatsbyにプルしてくることを推奨しているようです。

チュートリアル実践

今回のチュートリアルでは,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`,
      },
    },
  ],
}

データの取得方法は2通り

･ページクエリ

ページクエリの場合はpagesフォルダ配下のコンポーネントでしか使用できないみたいです。

// pages/about.js
import React from "react"
import { graphql } from "gatsby" // gatsbyからGraphQLをインポート
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
      }
    }
  }
`

･React hooks

共通コンポーネントなど,pages配下以外のコンポーネントではhooksを使います。

import React from "react"
import { css } from "@emotion/react"
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>
  )
}

pages配下でもhooksは使えました。
ページコンポーネントはページクエリ推奨なんですかね？
どっちも機能･性能が変わらないなら統一しちゃったほうが覚えること少なくていいんですけど。。。

感想

GraphQLの理解がふわっとしてます。
データの取得の仕方はわかりました。
クエリがちゃんと書けるかが不安なくらいですね。
ちょっとずつ理解していきます。

それではまた明日。

Gatsby触ってみる記事一覧

参考ページ

公式チュートリアル