Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8697

GraphQLについてのハンズオン

$
0
0

概要

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(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

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

実行

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

npm run start

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

作家の一覧取得

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

{authors{idname}}
本の一覧取得

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

{books{idnameauthorId}}
作家と本をまとめて取得

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

{authors{idnamebooks{idname}}}

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

最後に

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


Viewing all articles
Browse latest Browse all 8697

Trending Articles