Help us understand the problem. What is going on with this article?

GraphQLについてのハンズオン

概要

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

① 従来のやり方

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

② REST API

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

③ GraphQL

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

GraphQLの使い所

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

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

作家:{
    Aさん:
        本:{
            本1
            本2
            本3
        }
    }
    Bさん:
        本:{
            本1
            本2
            本3
        }
    }
}

上記のようなケースでは、恐らく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

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

実行

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

npm run start

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

作家の一覧取得

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

{
  authors{
    id
    name
  }
}
本の一覧取得

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

{
  books {
    id
    name
    authorId
  }
}
作家と本をまとめて取得

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

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

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

最後に

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away