はじめに

今回は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について簡単に紹介しました。

感想やコメント等あればよろしくお願いします！
また、twitterやyoutubeでのコメントもお待ちしています！