mottox2 blog

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

bloggatsby

今までの記事
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)

B!
dev

ブログのReactを16.8にあげてReact Hooksで書き換えてみた

2019/02/06にReact16.8がリリースされ、16.7のalphaから入っていたReact Hooksが安定版にやってきました。 そこで今回このブログで使われているReactを16.8に上

javascriptreact
blog

Netlifyのデプロイ通知をDiscordで受け取る方法

Netlifyでサイトをホスティングしていると、デプロイ開始から完了までのタイムラグがあることでデプロイの完了を把握するにはWeb UIを確認する必要があります。 しかし、デプロイごとにWeb UI

discordnetlify
dev

netlify-cliを使ってCLIでデプロイを行う

Netlifyには優れたUIを持つWeb画面が用意されていますが、CLI(コマンドラインインターフェース)も用意されており、CLIのみでのデプロイも可能になっています。 通常の開発ではWeb UIで

netlify