GraphQLとApolloを使ってみて、使い心地がすごくよかったので今回はセットアップ方法から実際にAPIを叩いてデータを取得するところまで書いてみます。

GraphQL概要

まずは概要ですが、すでに素晴らしい記事があるのでそちらをご覧ください。自分もこの記事を読んで勉強しました。

・下の記事はGraphQLの概要から細かいところまで網羅的にかかれているので時間がない方は下の記事を読むことをおすすめします。

・なぜGraphQLを使うといいのか、RESTとの違いは？？みたいな話は下記の記事にかかれております。

Apollo概要

これを導入することで、リクエストの結果のデータクラスなどを自動生成してくれるのですごく便利です。

この記事ではGraphQLの設定と、Apolloの設定の両方を説明します。

GraphQL コンソールを使う

実際のAPIとして使う場合は、サーバーサイドチームにGraphQL APIを定義する画面を生成してもらう必要があります。

Railsではこれを使うためのgemがあります。

ですが、これを用意するのは大変なので、今回はGithub APIを使います。

「とりあえず、試したい」みたいなときには最適だと思います。この記事では基本的にGithub APIを使用するものとなります。

schema.jsonを作成する

schema.jsonを作成します。これがないとGraphQLの設定ができません。

Step1

apollo CLIツールを導入します。(nodeが入ってない方は、先にいれておきましょう。)

$ npm install -g apollo

Step2

Githubのアクセストークンを取得します。アクセストークンは https://github.com/settings/tokens から取得できます。

自分のプロジェクトでは applo-token という名前で保存しました。

step3

schema.jsonをダウンロードするコマンドを実行します。

$ apollo service:download --endpoint https://api.github.com/graphql \
  --header "Authorization: Bearer <GitHub personal access tokens>"

<GitHub personal access tokens> とかかれているとこは、step2で取得したアクセストークンを使用します。

step1 ~ step3 を一通りやったら、schema.jsonを取得できます。

実装のための準備

step1

Android側の設定をします。GraphQL と Apolloを導入します。

- app/build.gradle

apply plugin: 'com.apollographql.android'

~~~


implementation 'com.apollographql.apollo:apollo-runtime:1.0.0-alpha4'

- ルートの build.gradle

classpath 'com.apollographql.apollo:apollo-gradle-plugin:1.0.0-alpha4'

step2

具体的な実装の前にschema.jsonを適切な場所に配置する必要があります。

app/main/graphql/に置きます。graphqlパッケージはないと思うので新規で作ります。

ここまでできたら、準備完了です。

step3

次に ~~~.graphql ファイルを作成します。作成は先ほど紹介した Github API のコンソールを操作してしましょう。今回はこうしました。

query User {
  user(login:"ユーザー名") {
    login
  }
}

これをベースに User.graphql ファイルを作成します。

app/main/graphql/の下に、User.graphql ファイルを作成して先ほど作ったqueryを貼り付けます。

これ、rebuildを実行すれば app/build/generated/source/apollo/classes の下にUserQuery.javaが生成していれば成功です。

実装

- データの取得(query)

まずは、データを取得する方法について書きます。Apolloを使うことでRetrofitはいらなくなるでしょう。

下記のコードを実行して、データが取得できたら完了です。

companion object {
   private const val BASE_URL = "https://api.github.com/graphql"
   private const val GITHUB_ACCESS_TOKENS = ""
}


val okHttpClient = OkHttpClient.Builder()
    .authenticator { _, response ->
        response.request().newBuilder().addHeader("Authorization", "Bearer ${MainUseRepository.GITHUB_ACCESS_TOKENS}").build()
    }.build()

val apolloClient = ApolloClient.builder()
    .serverUrl(BASE_URL)
    .okHttpClient(okHttpClient)
    .build()

val query = UserQuery.builder().build()

apolloClient.query(query).enqueue(object : ApolloCall.Callback<UserQuery.Data>() {
    override fun onFailure(e: ApolloException) {
        print(e.toString())
    }

    override fun onResponse(response: Response<UserQuery.Data>) {
        val user = response.data()?.user()
        print(user?.login())
    }
})

- データの更新(mutation)

今回は、issuesにスタンプを押すコードです。

注意：更新に関して他の誰かのリポジトリに対してゴミデータ投稿しないように注意してください。あくまで個人のリポジトリに対して実行しましょう。

まずはリアクションをつけるissuesのidを取得するqueryを書きましょう。(下記のものをそのままコピペしても動きません。)

query FindSubjectId {
  repository(owner: "ユーザー名", name:"リアクションをつけるissuesのリポジトリ") {
    issue(number: issuesの番号) {
      id
    }
  }
}

下記の変数は適宜修正してください。

ユーザー名： Githubのアカウント名
リアクションをつけるissuesのリポジトリ: リポジトリ名
issuesの番号：issuesの番号

次に AddReactionToIssues.graphql ファイルを作成しし、app/main/graphql/の下に、配置して下記を貼り付けましょう。

mutation AddReactionToIssue($subjectId: ID!, $content: ReactionContent!) {
  addReaction(input: {subjectId: $subjectId, content: $content}) {
    reaction {
      content
    }
    subject {
      id
    }
  }
}

引数に $subjectId と $contentの二つは実際のリポジトリの引数が入ります。

これをいつもの通り、

subjectId上で取得したFindSubjectIdで実行して取得したsubjectIdを使います。

val mutation = AddReactionToIssueMutation.builder()
    .subjectId("取得したsubjectid")
    .content(ReactionContent.THUMBS_DOWN)
    .build()

apolloClient.mutate(mutation).enqueue(object : ApolloCall.Callback<AddReactionToIssueMutation.Data>() {
    override fun onFailure(e: ApolloException) {
        print(e.toString())
    }

    override fun onResponse(response: Response<AddReactionToIssueMutation.Data>) {
        print("成功")
    }
})

これを実行した結果issuesにリアクションをつけることができます。

まとめ

・GraphQL、Apolloは便利
・データの取得はquery、データの更新はmutation
・~~~.graphql を作成し、rebuildしたらデータクラスを自動生成できる

GraphQLはほんと便利なので、これから使っていきたい。