GraphQL入門

この記事では、以下を中心にGraphQLの初歩について整理していきます。

GraphQLとは

  • Facebookが開発しているWeb APIのための規格
  • 「スキーマ言語」と「クエリ言語」からなる
    • スキーマ言語
      • GraphQL APIの仕様を記述するための言語
      • リクエストされたqueryは、スキーマ言語で記述したスキーマに従ってGraphQL処理系により実行されて、レスポンスを生成
    • クエリ言語
      • GraphQL APIのリクエストのための言語
      • これはさらに以下3種類がある
        • データ取得系のquery
        • データ更新系のmutation
        • サーバーサイドからのイベントの通知であるsubscription

起源

  • もともとFacebookが開発したもので、2015年に仕様と参照実装がOSSに
  • GraphQLを開発する以前
    • FacebookはWeb APIとして、「RESTful API」と「FQL（Facebook Query Language）」を運用していた.
      • RESTful APIは、現在も“Graph API”としてFacebookのソーシャルグラフへアクセスするための公開APIとして提供
      • FQL（SQL風の構文である）は、廃止
        • GraphQLに置き換えられた?
  • GraphQL開発の動機
    • モバイルアプリケーションで利用するオブジェクトグラフとAPIレスポンスの構造に乖離があり、この問題を改善するため
  • 2018年11月にGraphQL Foundationが設立される
    • 以下等のメンテナンスがなされていく
      • GraphQLの規格そのもの
      • 参照実装やエディタなどのツールチェイン
    • 安定して開発されることが期待される

特徴

  • クエリの構造とレスポンスの構造がよく似ていること
  • スキーマによる型付けにより型安全な運用ができること
  • レスポンスに含まれるデータの指定が必須であること
  • クエリからレスポンスの構造を予測できるため、Web APIに対する深い知識がなくても、GraphQLのクエリであればある程度は読み書きが出来ること
  • スキーマとそれを利用するツールによる開発サポートが受けられる (ex. GraphiQL)
  • クエリの学習コストが小さいこと

スキーマ言語

  • Web APIの仕様を記述するための言語
  • 型システムを内包
    • クエリやレスポンスのバリデーションやリゾルバの適用に利用
type Query {
  todos: [Todo!]!
}

type Todo {
  id: ID!
  name: String!
  user: User!
  priority: Int
}

type User {
  id: ID!
  name: String!
}
  • フィールド
    • 型は、スカラー型、オブジェクト型、 列挙型などを利用可能
    • Not Nullは感嘆符で表現: ex. ID!
    • リストは角カッコで表現: ex. [Todo!]`
  • 各フィールドにはリゾルバ（resolver）と呼ばれる関数がマッピングされる
    • リゾルバ: オブジェクト（ex. Userインスタンス）を引数として受け取り、そのオブジェクトのプロパティ（ex. User#name）を返す関数

クエリ

  • Web APIリクエストにおいてどのようなデータを取得するかを表現
  • オペレーション型
    • データ取得系のquery、データ更新系のmutation、pub/subモデルでサーバーサイドのイベントを受け取るsubscriptionの3種類がある

リクエスト

query {
  getTodos {
    id
    name
    priority
  }
}

レスポンス

{ "id": "1", "name": "Get Milk", “priority": "1" },
{ "id": “2", "name": “Go to gym", “priority": “5" },
  • 上記のクエリのタイプ: query（＝データ取得系）
    • idのname,priorityを取得する

GraphQLを触ってみる

以下Playgroundで試すことが出来る