Apollo iOSを使ってGitHub API v4（GraphQL）クライアントを作る

諏訪 悠紀

2019.02.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Apollo iOSを試す

巷で話題のGraphQL。弊社でもGraphQL（AWS AppSync）を活用した案件も現れてきており、モバイルアプリ業界ではいま学ぶべき技術なのかなぁと思ったりしています。

GraphQLのiOS向けのクライアントとしてはやはりApollo。ということでGitHub API v4とApollo iOSを使って、GraphQLクライアントを試しに作ってみました。

AWS AppSyncがリリースされた直後に軽く触ってみたことがありましたが、現在試してみたところ個人的な感覚では数倍簡単に利用できるようになっていました。

サンプルコード

以下のサンプルコードを公開しています。こちらもご一緒に参考にしていただけると幸いです。

環境構築

まずはじめに、XcodeでiOSアプリプロジェクトはすでに作成済みとして進めます。CocoaPodsは使わず、CarthageのみでApolloをインストールします。

まずCarthageが入っていなければインストール。

$ brew install carthage
$ touch Cartfile

Cartfile にApollo iOSを書きます。

Cartfile

github "apollostack/apollo-ios"

ビルドを実行します。

$ carthage update --platform iOS

基本的なCarthageのライブラリ導入方法と同じです。出来上がった Carthage/Build/iOS/Apollo.framework をLinked Frameworks and Librariesに加えます。またBuild PhaseのRun Scriptに以下を追加し、InputFilesに $(SRCROOT)/Carthage/Build/iOS/Apollo.framework を加えます。

$ /usr/local/bin/carthage copy-frameworks

GitHubのトークンの取得

GitHub API v4からSchemaを取得したりする際にGitHubアカウントのトークンを取得しておく必要があります。Developer settingsのPersonal access tokensで新規に作成します。

GitHub API v4のSchemaの取得

次にGraphQLのSchemaを取得します。

GraphQLのSchemaは Apollo CLI を使って取得できます。

$ yarn global add apollo
$ apollo schema:download --endpoint="https://api.github.com/graphql" --header "Authorization: Bearer <GitHub Token>"

`` には前項で取得したGitHubトークンを設定しましょう。

APIクライアントコードの自動生成

GraphQLではSchemaの他に、クライアントからどのような呼び出し方を行うかを記述するGraphQLファイルを作成する必要があります。このファイルを作成することにより、APIクライアントのコードを自動生成できます。

まずGraphQLファイルは次のように書きます。これはGitHubのユーザーアカウントの情報の一部を取得しています。

query.graphql

query ShowViewer {
  viewer {
    id
    name
    email
    avatarUrl
    company
  }
}

あとは次のコマンドを実行すると API.swift （名前は自由）が生成できます。

$ apollo codegen:generate --queries=query.graphql --localSchemaFile=schema.json --target=swift API.swift

なおこのコマンドをRun Scriptに追加すると、デバッグ時に自動生成されるような仕組みにでき、便利です。

iOSアプリの実装

View ControllerにGraphQLにクエリを投げる処理を実装します。結果は適当に配置したLabelやImageViewに反映しています。

class ViewController: ApolloClientViewController {

    static let githubToken = "<GitHub Token>"

    let apollo: ApolloClient = {
        let configuration = URLSessionConfiguration.default
        configuration.httpAdditionalHeaders = ["Authorization": "Bearer \(ApolloClientViewController.githubToken)"]
        let url = URL(string: "https://api.github.com/graphql")!
        return ApolloClient(networkTransport: HTTPNetworkTransport(url: url, configuration: configuration))
    }()

    @IBOutlet weak var nameLabel: UILabel!
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        apollo.fetch(query: ShowViewerQuery()) { [weak self] (result, error) in
            guard let strongSelf = self else { return }
            if let viewer = result?.data?.viewer {
                strongSelf.nameLabel.text = viewer.name
                do {
                    let url = URL(string: viewer.avatarUrl)!
                    let data = try Data(contentsOf: url)
                    strongSelf.imageView.image = UIImage(data: data)!
                } catch {
                    print(error)
                }
            }
        }
    }

}

動作結果

実行すると、以下のような感じでユーザー情報が取得できます。

GraphQL+Apolloで爆速開発をしよう

興味本位でApolloをiOSに導入してみましたが、非常に簡単に実行するところまででき、好感が持てました。通信処理が完全に自動生成で済むので、モバイルアプリエンジニアとしては非常に作りやすいと思います。

ぜひ皆さんもお試しください！

AWS