mottox2 blog

GatsbyJS v2 はじめの一歩 (5) GraphQLによるデータ管理

mottox2
mottox2
2018/09/04

今までの記事
GatsbyJS v2 はじめの一歩 (1) 開発環境の立ち上げ
GatsbyJS v2 はじめの一歩 (2) 実際にページを作る
GatsbyJS v2 はじめの一歩 (3) ページにスタイルを当てる
GatsbyJS v2 はじめの一歩 (4) gatsby buildとデプロイ


Webページを構成するのに必要なのは、HTML, CSS, JSとDataです。Dataというのは stringという文字列だったり、42という数字だったり、{ pizza: true }のようなオブジェクトで表現できます。データはReact Componentの外にあるべきという考えに基づいており、マークダウンやCSVファイル、一般的なデータベース、Web APIなども含めてデータ層で持っておき、そういったデータを簡単に扱えるようにしています。
GatsbyJSではデータ層からReactコンポーネントにデータを取得するために GraphQL というクエリ言語を採用しています。

GraphQLはFacebookが中心になって開発されている技術でGitHubもGraphQLのAPIを提供しています。従来のAPI形式では複数のリクエストが必要だったケースもGraphQLでは一発でデータが取得できるようになっていたり、よりクライアント(GatsbyJSではブラウザ)から呼びやすい形式になっています。

余談ですが、GatsbyJSにとってGraphQLによってデータを管理することが他の静的サイトジェネレータとの違いになっています。他のジェネレータがリポジトリ内のファイルを取り扱うことが多いのに対して、GatsbyJSではWeb APIのデータとファイルと同列に扱えることによってよりマイクロサービス志向でコンテンツとビューの分離が実現できていると言えるでしょう。

はじめてのGraphQL

説明よりはどう使われているかを確認するほうが早いでしょう。
GatsbyJSで一番簡単なデータの定義はgatsby-config.jsに書くsiteMetadataです。いわゆるサイト全体で使用するtitleやdescriptionを管理するために使われるデータソースです。

今まではプラグインの情報だけを書いていましたが、siteMetadataを書き足しましょう。

gatsby-config.js
module.exports = {
  pathPrefix: '',
  siteMetadata: {
    title: 'はじめてのGraphQL',
    description: 'GraphQLを初めて使ってみます。'
  },
  plugins: [
    'gatsby-plugin-styled-components',
  ]
}

それでは定義したデータをReactコンポーネントから呼び出してみましょう。src/pages/data.jsを次のように編集します。

src/pages/data.js
import React from 'react'
import { graphql } from 'gatsby'

const Data = ({ data }) => (
  <div>
    <div>{ data.site.siteMetadata.title }</div>
    <div>{ data.site.siteMetadata.description }</div>
  </div>
)

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
        description
      }
    }
  }
`

export default Data

この状態で http://localhost:8000/data を確認するとgatsby-config.jsに定義した文字列が表示されていると思います。gatsby-config.jsをいじった後にgatsby developを立ち上げ直すのを忘れないようにしましょう。

ポイントを抑えておきましょう。

  • gatsbyからgraphqlをインポートして、テンプレートリテラル内にGraphQLのクエリを書く。
  • GatsbyJSのPageコンポーネントでqueryという名前でクエリをexportするとgraphqlを実行してくれる。
  • GraphQLによって得られるデータはdataという名前でpropsに付与される。

データとコンポーネントが分離されており、GraphQLが間を取り持ってくれるのが分かると思います。

GraphiQLの紹介

次の記事ではデータをGatsbyJSで管理するためのSource Pluginを取り扱いますが、その前でGraphQLを視覚的に扱えるGraphiQLの紹介をしておきます。

gatsby developを実行するときに次のようなログが表示されたと思います。その際に「View GraphiQL, an in-browser IDE, to explore your site's data and schema」という文字列とURLが表示されたと思います。URL( http://localhost:8000/___graphql )を開いてみましょう。

Screen Shot 2018-09-04 at 10.12.06.png (71.0 kB)

URLを開くと次のような画面が表示されます。画面は左右に分割されており、左側はGraphQLのクエリを書けるテキストエリア、右側が実行結果が表示される領域になっています。

localhost_8000____graphql_query=%23%20Welcome%20to%20GraphiQL%0A%23%0A%23%20GraphiQL%20is%20an%20in-browser%20tool%20for%20writing%2C%20validating%2C%20and%0A%23%20testing%20GraphQL%20queries.%0A%23%0A%23%20Type%20queries%20into%20this%20si.png (258.6 kB)

例えば先程入力したクエリを入力して、左上の「実行ボタン」を押すか、Cmd+Enterを押すと結果が右側に出力されます。

localhost_8000____graphql_query=%23%20Welcome%20to%20GraphiQL%0A%23%0A%23%20GraphiQL%20is%20an%20in-browser%20tool%20for%20writing%2C%20validating%2C%20and%0A%23%20testing%20GraphQL%20queries.%0A%23%0A%23%20Type%20queries%20into%20this% (1).png (321.0 kB)

また、右上の「Docs」というボタンを押したり、Cmdキーを抑えながら、テキストエリアの要素をクリックすると画面右にクエリの構造などが表示されます。これもクリックしていくといろいろ見れるので、GatsbyJSで開発していく上でうまく使っていくとよいでしょう。

localhost_8000____graphql_query=%23%20Welcome%20to%20GraphiQL%0A%23%0A%23%20GraphiQL%20is%20an%20in-browser%20tool%20for%20writing%2C%20validating%2C%20and%0A%23%20testing%20GraphQL%20queries.%0A%23%0A%23%20Type%20queries%20into%20this% (2).png (495.5 kB)

@mottox2フリーランスWebデベロッパー

都内でフリーランスエンジニア・デザイナーとしてWebサービスやスマホアプリを作っています。Ruby on Railsでの新規事業の爆速立ち上げや、使いやすいSPAの開発が得意です。

お問い合わせはこちら

自分のGitHubから読み取る挫折の歴史 in 2018

この記事は、「Crieitアドベントカレンダー」9日目の記事です。遅刻ごめんなさい。 Crieitはプログラマー・クリエイターのためのサイトなので、自分のクリエイターになろうとして失敗した記録をG

Netlify Functions + TypeScriptのボイラープレートを作った

8月に書いた「Netlify FunctionsでTypeScriptを使う」という記事で、netlify-lambdaをフォークしてTypeScriptを使っていると書きました。 数ヶ月経ち、フォ

netlify

Netlify FunctionsでTypeScriptを使って開発する

この記事は既に内容が古くなっています。最新の内容は「Netlify Functions + TypeScriptのボイラープレートを作った」をご覧ください 先日Netlify Functionsの

netlify

技術ブログを支える技術(Gatsby + esaio)

2018年5月に公開を始めた当ブログですが、Gatsbyをより多くの人に使ってもらいたいと考えソースコードをオープンにしたので、ブログで用いている技術について説明します。 > 当サイトについて当サ

esaiogatsby