Github の API を使って GraphQL を触ってみる

先日社内の勉強会で Github API を使って GraphQL を触ってみたので、ちょっとまとめてみようと思います。

参考にしたリンク

GraphQL のチュートリアルを見ながら、各文法を Github GraphQL API の Explore を使って実際にクエリを組んでレスポンスを見ていきます。

手始めに

まずは簡単なクエリから

query {
  viewer {
    name
  }
}

こういうクエリを投げてみると

{
  "data": {
    "viewer": {
      "name": "Yohei Honda"
    }
  }
}

こんな感じのレスポンスが返ってきます。 リクエストのクエリと同じような感じで返ってきてわかりやすい。

複数の field を取得してみる

query {
  viewer {
    name
    bio
    location
  }
}

レスポンスは以下の通り。

{
  "data": {
    "viewer": {
      "name": "Yohei Honda",
      "bio": "Ruby developer",
      "location": "Japan, Tokyo"
    }
  }
}

Alias

次に Alias を設定してみます。 例えば、使うときに Viewer だとちょっとわかりにくいかもしれないので myself っていう Alias を貼ってみます。

query {
  myself: viewer {
    name
    bio
    location
  }
}

レスポンスは以下。

  "data": {
    "myself": {
      "name": "Yohei Honda",
      "bio": "Ruby developer",
      "location": "Japan, Tokyo"
    }
  }
}

join みたいな感じ

次に、SQL の join みたいなことをしてみます。 ここでは Viewer(User) のリポジトリの最初の一件の name と description を取ってきます。

クエリ

query {
  viewer {
    repositories(first: 1) {
      edges {
        node {
          name
          description
        }
      }
    }
  }
}

レスポンス

{
  "data": {
    "viewer": {
      "repositories": {
        "edges": [
          {
            "node": {
              "name": "design-pattern-study",
              "description": "デザパタの勉強用リポジトリ"
            }
          }
        ]
      }
    }
  }
}

Fragment

次にフラグメント機能です。 フラグメント機能はクエリの一部を関数みたいに切り出すことが出来る機能です。

クエリ

query {
  viewer {
    ...userBasicFragments
  }
}

fragment userBasicFragments on User {
  name
  bio
  location
}

レスポンス

{
  "data": {
    "viewer": {
      "name": "Yohei Honda",
      "bio": "Ruby developer",
      "location": "Japan, Tokyo"
    }
  }
}

変数

GraphQL では変数も使えます。

クエリ

query Sample($repo_count: Int!) {
  viewer {
    repositories(first: $repo_count) {
      edges {
        node {
          name
          description
        }
      }
    }
  }
}

で変数は以下

{
  "repo_count": 1
}

レスポンス

{
  "data": {
    "viewer": {
      "repositories": {
        "edges": [
          {
            "node": {
              "name": "design-pattern-study",
              "description": "デザパタの勉強用リポジトリ"
            }
          }
        ]
      }
    }
  }
}

Directives

GraphQL ではクエリ内で if とかも使えちゃいます。

クエリ

query Sample($get_repositories: Boolean!) {
  viewer {
    name
    repositories(first: 1) @include(if: $get_repositories) {
      edges {
        node {
          name
          description
        }
      }
    }
  }
}

で引数

{
  "get_repositories": false
}

レスポンス

{
  "data": {
    "viewer": {
      "name": "Yohei Honda"
    }
  }
}

クエリ上 repositories を取ってきていますが、 get_repositories という引数が false なので 取ってこないようになっています。

感想

色々機能もあるし、API を使う側としては柔軟にいろいろできそうでいい感じですね。触ってて楽しい。 一方で API を用意する側は GraphQL のパーサーを用意したりしなきゃいけないので、結構大変なのかな。 そこら辺もライブラリやフレームワークが揃ってくればいいのかもしれませんが、用意する側の敷居はやはり高い気もしました。