はじめに
今回はGraphQLの概要を紹介します！
- GraphQLが出てくるまでに、どのようなデータ通信があったのか?
- RESTの問題点は何か?
- GraphQLでできること
- GraphQLの始め方
を解説します！
動画で、テンポよく学びたい方はこちらをどうぞ！
【YouTube動画】 GraphQLを使いたいけどまだやってないという方に！ GraphQLの始め方を解説します！
データ通信の歴史
最初に出てきたデータ通信として、RPCと呼ばれる規約があります。
これはRemote Procedure Callの略で、クライアント側からサーバー側のメソッドを呼ぶことができます。
最近では、Googleが考案したHTTP/2準拠のgRPCというものも出てきていますね。
次に出てきたのは、マイクロソフトが考案したSOAPです。
これは、XMLを使ってデータ通信をします。
SAML認証でも使われてますね。
下のようなxmlファイルを作成する必要があります。
ちょっと、読みづらいですね。
<?xml version="1.0"?>
<PurchaseOrder PurchaseOrderNumber="99503" OrderDate="1999-10-20">
<Address Type="Shipping">
<Name>Ellen Adams</Name>
<Street>123 Maple Street</Street>
<City>Mill Valley</City>
<State>CA</State>
<Zip>10999</Zip>
<Country>USA</Country>
</Address>
<Address Type="Billing">
<Name>Tai Yee</Name>
<Street>8 Oak Avenue</Street>
<City>Old Town</City>
<State>PA</State>
<Zip>95819</Zip>
<Country>USA</Country>
</Address>
<DeliveryNotes>Please leave packages in shed by driveway.</DeliveryNotes>
<Items>
<Item PartNumber="872-AA">
<ProductName>Lawnmower</ProductName>
<Quantity>1</Quantity>
<USPrice>148.95</USPrice>
<Comment>Confirm this is electric</Comment>
</Item>
</Items>
</PurchaseOrder>
SOAPよりも簡単にデータ通信できる規約として生まれたのがRESTです。
RESTはリソースURLにHTTPメソッド (GET, POST, PUT, PATCH, DELETE) を使ってレスポンスを返してもらって使います。
バックエンド側で制御しやすく、シンプルで導入しやすいです！
RESTの問題点
RESTはシンプルで使いやすいのですが、レスポンスが固定であるため、以下のような問題があります。
レスポンスが固定のため...
- 複数のデータを掛け合わせて使いたい場合、1つのAPIでは難しい
- 使う情報が少ない場合、フロント側でフィルタリングする必要がある
GraphQLは上記の問題を解消するために、Facebookが開発しました。
これは、フロント側がクエリを要求するフロント主体のデータ通信です。
また、APIの仕様をスキーマとして定めて開発を進めます。
GraphQLでできること
GraphQLでは以下のような機能が提供されます。
雰囲気だけでも掴めれるようにコードも書いておきました。
- クエリ
- ミューテーション
- サブスクリプション
クエリ
クエリはSQL文のように、欲しいデータを書きます。
query {
# 欲しいデータのモデル名を書く
person(personId: 1) {
# 実際に取得したいデータを書く
name
age
address
# リレーションを設定している場合、紐づいている先のデータも取れます！
company {
name
}
}
}
ミューテーション
値の変更をするために使います。
これはRESTと同じように使えます。
mutation personMutation {
update(name: "Namae!!!") {
id
name
}
}
サブスクリプション
クライアント側がデータ変更を検知した時に動作します。
subscription {
nameChange {
name
}
}
GraphQLの事始め
REST APIにおけるpawやpostmanのように、GraphQLにも専用のツールがあります。
GraphiQLかGraphQL playgroundのどちらかが良いと思います。
これらを使うと、クエリ文の発行を試すことができます。
また、クエリ文を叩くためのサーバーとして、スターウォーズ APIやGitHub APIがあります。
クエリ文だけなら、スターウォーズAPI、ミューテーションも試したいならGitHub APIで遊んでみることができます！
試してみて、実際に自分で作ってみたいと思われたら、ApolloプロジェクトやRelayプロジェクトで使いたいサーバーを選んで、作ってみてください！！
まとめ
今回、GraphQLについて簡単に紹介しました。