概要
GraphQLについて、NodeJSのウエブフレームワークmajidaiを使ってハンズオンを実施したいと思います。GraphQLとは何かを理解する前に、クライアントとサーバーの間でデータのやり取りするにあたってどの様な方法あるか考えてみましょう。僕が認識している中では、以下の３つの方法が主流ではないかと思います。
① 従来のやり方
クライアントからリクエスト受け付けるたびにDBサーバーから情報を取得し、色々と整形しレスポンス
Image may be NSFW.
Clik here to view.
② REST API
用途毎にエンドポイントを用意する
Image may be NSFW.
Clik here to view.
③ GraphQL
エンドポイントが一つのみ
Image may be NSFW.
Clik here to view.
GraphQLの使い所
個人的にはRESTで十分だと思っておりますが、以下の場面ではネックになります。
例えば、作家一覧を取得するエンドポイント「/authors」と本の一覧を取得するエンドポイント「/books/author_idXX」があります。
以下のサンプルのように、RESTを使って作家さん毎の本の一覧を取得したい
作家：{Aさん：本：{本１本２本３}}、Bさん：本：{本１本２本３}}、}上記のようなケースでは、恐らくJavascriptで以下のような処理を記述するでしょう。
// 作家一覧を取得するauthors=getData("/authors");// 作家毎の処理for(varauthorinauthors){// 作家毎サーバーと通信を行う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です。
Image may be NSFW.
Clik here to view.
作家の一覧取得
左側のテキストボックスに以下のクエリを入力し、左上の実行ボタンを押下してください。右側に何らかの結果が返ってきます。このクエリは、作家のIDと名前を取得するクエリです。
{authors{idname}}本の一覧取得
そして、上と同様に左側のテキストボックスに本のID、名前、作者のIDを取得するクエリを実行してください。
{books{idnameauthorId}}作家と本をまとめて取得
上と同様に以下のクエリを実行してください。
{authors{idnamebooks{idname}}}何か気付きましたか。
最後のクエリを見てください。上のRESTの場合はループでサーバーとやり取りしていたのですが、GraphQLを使えば１回の通信で習得できます。また、クライアント側で必要なフィールドを指定する事ができます。
最後に
GraphQLを触ってみて如何でしたか。何かの参考になれば幸いです。
今回はGraphQLの中のクエリのみを紹介しましたが、それ以外にMutationとSubscriptionがあります。