Chapter 15

GraphQL

graphql.png
Contentfulからデータを取得するためのクエリ言語としてGraphQLを用います。
ここでは、Gatsby内でGraphQLを扱うための基礎的な知識について学んでいきます。

GraphQLとは

GraphQLはAPI用のクエリ言語です。
以下のような特徴が挙げられます。

  • 1つのクエリで多くのリソースにアクセスできる(しやすい)
  • クライアント側で取得するデータ構造を定義でき、柔軟なリクエストを送れる
  • API仕様書が自動で生成される

文字ベースの説明より、まずは実際のクエリを見るのがもっとも手っ取り早いでしょう。

query {
  hero(id: 1) {
    name
    sex
    job
  }
}
結果
{
  "data": {
    "hero": {
      "name": "Luke Skywalker",
      "sex": "male",
      "job": "jedi"
    }
  }
}

このクエリは指定したIDのヒーローの情報を取得するという簡単なクエリです。
REST APIに置き換えるとGET https:endpoint/hero/1に当たります。RESTではIDのみを指定してリクエストをしているのに対し、GraphQLのクエリは取得したいデータ構造を自身で定義します。
また、必要なデータのみを取得できるようにクエリを柔軟に変更できます。例えば、ヒーローの名前だけ必要な場合はこのように書けば名前だけ取得できます。

query {
  hero(id: 1) {
    name
  }
}

Gatsby内でGraphQLをつかう

GraphiQL

GraphQL全体を理解する上では、まだまだ説明すべき内容がたくさんありますが、Gatsby内でGraphQLを扱う分には少ない知識で十分始められます。それはGatsbyがGraphQLを扱う環境を整えてくれており、開発者が本質的な開発に注力できるように設計されているからです。
実際にやることとしては、さきほど例で示したようなクエリを書くことやこれから説明するGatsby内で用意されているツールを用いてスキーマを確認することくらいです。

それでは、実際にツールを使ってスキーマを確認していきましょう。
gatsby developで開発サーバーを立ち上げたあと、http://localhost:8000/___graphql にアクセスしてみましょう。
これは「GraphiQL」(グラフィカル)というブラウザ上でGraphQLのクエリを組み立て、テストすることができるツールです。
graphiql.png

画面は以下の用途で3分割されています。

  • 左側: 利用できるクエリ一覧
  • 中央: クエリを書くエディタ
  • 右側: クエリの結果

データを定義する

簡単なデータを定義して、実際にデータを取得してみましょう。
gatsby-config.jsに以下のように記載しましょう。
Gatsby Config APIを介して、サイトの情報を設定しGatsby内からGraphQLを用いて呼び出すことができます。

gatsby-config.js
/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

module.exports = {
  siteMetadata: {
    title: "Dev Blog",
    description: "Gatsbyで作成したブログサイトです。",
    author: "Engineer X"
  },
  /* Your site config here */
  plugins: [],
}

http://localhost:8000/___graphql にアクセスし、クエリを書きメニュー上部の実行ボタンを押しましょう。設定したデータが取得できるはずです。

エディタ上にて
query MyQuery {
  site {
    siteMetadata {
      title
      description
      author
    }
  }
}

graphiql2.png