概要

GraphQLについて、NodeJSのウエブフレームワークmajidaiを使ってハンズオンを実施したいと思います。GraphQLとは何かを理解する前に、クライアントとサーバーの間でデータのやり取りするにあたってどの様な方法あるか考えてみましょう。僕が認識している中では、以下の３つの方法が主流ではないかと思います。

① 従来のやり方

クライアントからリクエスト受け付けるたびにDBサーバーから情報を取得し、色々と整形しレスポンス

② REST API

用途毎にエンドポイントを用意する

③ GraphQL

エンドポイントが一つのみ

GraphQLの使い所

個人的にはRESTで十分だと思っておりますが、以下の場面ではネックになります。

例えば、作家一覧を取得するエンドポイント「/authors」と本の一覧を取得するエンドポイント「/books/author_idXX」があります。
以下のサンプルのように、RESTを使って作家さん毎の本の一覧を取得したい

作家：{
    Aさん：
        本：{
            本１
            本２
            本３
        }
    }、
    Bさん：
        本：{
            本１
            本２
            本３
        }
    }、
}

上記のようなケースでは、恐らくJavascriptで以下のような処理を記述するでしょう。


// 作家一覧を取得する
authors = getData("/authors");
// 作家毎の処理
for(var author in authors) {
    // 作家毎サーバーと通信を行う
    books = getData("/books/" + author["id"]);

    // TODO
    ....
}

「getData」とはサーバと通信し、データを取得する関数別当あると想定してください。

問題点

こちらのJavascriptのコードを見てお気付きだと思いますが、作家の数通りサーバーと通信を行う必要があります。作家の数があればあるほど遅くなります！

解決策

ここで登場するのがGraphQLです。GraphQLとはFacebook社が開発したOSSです。
公式サイトでは以下のように定義されています。

GraphQLとはAPIのためのクエリ言語とサーバーサイドでクエリを実行するためのランタイムです

色々難しく書いてありますが、僕はRESTの新しいバージョンであると勝手に認識しております。
言葉だけでは理解しにくいのハンズオンをしてみましょう。

環境構築

NodeJSを使います。もしNodeJSが入っていないのであれば、こちらよりダウンロードしてください。

ソースコードの準備

Githubにソースコードを置いておりますのでダウンロードするか、下記のコマンドでレポジトリをクーロンしてください。

git clone https://github.com/dakc/graphql.git

必要なパッケージのインストール

graphqlフォルダー内から以下のコマンドを実行し、必要なパッケージをインストールします。

npm install

以下の３つのパッケージがインストールされます。
1. graphql
2. majidai
3. express-graphql

実行

以下のコマンドを実行し、サーバーを起動します。

npm run start

ブラウザを開いて http://127.0.0.1:8000/graphql にアクセスします。
以下のようなページが表示されたらOKです。

作家の一覧取得

左側のテキストボックスに以下のクエリを入力し、左上の実行ボタンを押下してください。右側に何らかの結果が返ってきます。このクエリは、作家のIDと名前を取得するクエリです。

{
  authors{
    id
    name
  }
}

本の一覧取得

そして、上と同様に左側のテキストボックスに本のID、名前、作者のIDを取得するクエリを実行してください。

{
  books {
    id
    name
    authorId
  }
}

作家と本をまとめて取得

上と同様に以下のクエリを実行してください。

{
  authors {
    id
    name
    books {
      id
      name
    }
  }
}

何か気付きましたか。
最後のクエリを見てください。上のRESTの場合はループでサーバーとやり取りしていたのですが、GraphQLを使えば１回の通信で習得できます。また、クライアント側で必要なフィールドを指定する事ができます。

最後に

GraphQLを触ってみて如何でしたか。何かの参考になれば幸いです。
今回はGraphQLの中のクエリのみを紹介しましたが、それ以外にMutationとSubscriptionがあります。

GraphQLについてのハンズオン

概要