64
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

GraphQLの始め方!概要だけさらっと学ぼう!

はじめに

今回はGraphQLの概要を紹介します!

  • GraphQLが出てくるまでに、どのようなデータ通信があったのか?
  • RESTの問題点は何か?
  • GraphQLでできること
  • GraphQLの始め方

を解説します!

動画で、テンポよく学びたい方はこちらをどうぞ!
【YouTube動画】 GraphQLを使いたいけどまだやってないという方に! 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について簡単に紹介しました。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
64
Help us understand the problem. What are the problem?