この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
GraphQL
GraphQL は API 用のクエリ言語であり、ランタイムで既存データに対しクエリを実行します。
REST との違い
GraphQL の大きな特徴として API エンドポイントは 1 つだけ というものが挙げられます。
そのエンドポイントに対してクエリを送信し必要な情報を取得するため、リソースの数だけエンドポイントを用意する必要はありません。
仕様
GraphQL サービスは 型 と フィールド を定義し、それぞれの型の各フィールドに関数を提供することによって作成されます。
type Query {
me: User
}
type User {
id: ID
name: String
}
function Query_me(request) {
return request.auth.user;
}
function User_name(user) {
return user.getName();
}
GraphQL サービスが実行されると、受信されたクエリは提供された関数を実行して結果を生成します。
クエリ例
{
me {
name
}
}
結果(JSON 形式)
{
"me": {
"name": "Luke Skywalker"
}
}
クエリと同じ階層の結果が返って来ることがわかります。
ここでクエリを以下のように変更すると、
{
me {
name
id
}
}
結果は次のようになるでしょう。
{
"me": {
"name": "Luke Skywalker",
"id": <any id>
}
}
これが エンドポイントが 1 つだけ という由縁です。
GraphQL API では必要なデータのみを取得できます。
不要なデータは取得しません。
ところで、こちらの例は GraphQL 公式の Introduction ページ からの引用なのですが、name
が Luke Skywalker となっていますね。
どうやら GraphQL の開発者の方(々)はスター・ウォーズがお好きなようです。
奇遇ですね、私もです。
試してみる
多くのプログラミング言語が GraphQL をサポートしおり、フレームワークやライブラリも豊富です。
サーバーライブラリだけでざっとこれだけあります。
- C# / .NET
- Clojure
- Elixir
- Erlang
- Go
- Groovy
- Java
- JavaScript
- PHP
- Python
- Scala
- Ruby
今回は JavaScript でサンプルを動かしてみることにしました。
利用したのは GraphQL.js というライブラリ。
公式の手順 に従って実行してみました。
1. 以下のコマンドを実行してパッケージをインストール
npm install graphql
2. 上記コマンドを実行したディレクトリに以下のコードを書いた hello.js を作成
var { graphql, buildSchema } = require('graphql');
var schema = buildSchema(`
type Query {
hello: String
}
`);
var root = { hello: () => 'Hello world!' };
graphql(schema, '{ hello }', root).then((response) => {
console.log(response);
});
3. 以下のコマンドを実行
node hello.js
結果はこちら。
{ data: { hello: 'Hello world!' } }
解説
var schema = buildSchema(`
type Query {
hello: String
}
`);
ここではスキーマを定義しています。
String 型の hello というフィールドを持つ型 Query を作成。
var root = { hello: () => 'Hello world!' };
hello が呼び出された時の関数では Hello world! の文字列を返します。
graphql(schema, '{ hello }', root).then((response) => {
console.log(response);
});
こちらがクライアント側のコードとなります。
API に対して hello のクエリを実行。
結果をログ出力しています。
ちょっといじる
Query 型に bye
というフィールドを追加して、それに対応する関数も作成します。
var schema = buildSchema(`
type Query {
hello: String
bye: String
}
`);
var root = { hello: () => 'Hello world!', bye: () => 'Bye world?' };
この時 graphql()
の第二引数をそれぞれ設定した場合、結果は次のようになります。
- { hello }
- { data: { hello: 'Hello world!' } }
- { bye }
- { data: { bye: 'Bye world?' } }
- { hello, bye }
- { data: { hello: 'Hello world!', bye: 'Bye world?' } }
どれもちゃんと動作しますね。
これが GraphQL API です。
必要なデータは必要な時に!
さいごに
GraphQL についてなんとなく理解できたでしょうか?
実際に手を動かしてみると分かることも多いと思います。
AWS AppSync を利用する場合は避けては通れない技術なので、是非とも勉強して身につけましょう。