Apollo-iOSを使用してGraphQLを叩く - Studyplus Engineering Blog

こんにちは。
iOSエンジニアの弘田です。

みなさんGraphQLはご存知ですか？
知らない方は弊社のエンジニアがGraphQLの記事を書いているのでぜひ読んでみてください。
GraphQLを導入しようとしている話

Studyplusのアプリで一部GraphQLを使用する際にApolloを使用しました。

Apolloって？

ApolloはGraphQLベースのデータスタックです。
環境別にライブラリがあり、今回はApollo-iOSを使用します。
https://github.com/apollographql/apollo-ios

公式サイト : https://www.apollographql.com/docs/ios/installation.html

Apollo-iOSの選定理由

Swift4がサポートされている
Apollo-cliでModelを生成できる
- サーバーが更新されたらクエリを書いてスクリプトを実行すればいいので人為的ミスが減る
  - 詳細は後述

GraphQLをPlaygroundから叩いてみる

まずはApollo-iOSを使用せず、普通にGraphQLのエンドポイントを叩いてみましょう。

GraphQLはクライアント側で必要な情報だけを取得するためにクエリを書く必要があります。
クエリはJSON形式で記述します。

このようなデータがあるとします。

user {
    id
    name
    age
}

このときアプリ側で必要な情報はnameだけあれば問題ない時ありますよね。
REST APIの場合はエンドポイントが/userのようになっていて、
idやageも返却されresponse内容に使わない情報が含まれていることがよくあります。

ではGraphQLのnameだけをリクエストするクエリを書いてみましょう。

{ user { name } }

このクエリをURLRequestのbodyに入れてPOSTします。

import UIKit
import PlaygroundSupport

PlaygroundPage.current.needsIndefiniteExecution = true

let url = URL(string: "http://localhost:3000/graphiql")

var request = URLRequest(url: url!)
request.httpMethod = "POST"
request.addValue("application/json; charaset=utf-8", forHTTPHeaderField: "Content-Type")

//認証Headerが必要な場合
request.addValue(String(format: "OAuth %@", token), forHTTPHeaderField: "Authorization")

let query = "{ user { name } }"

let body = ["query": query]
request.httpBody = try! JSONSerialization.data(withJSONObject: body, options: [])
request.cachePolicy = .reloadIgnoringLocalCacheData

let task = URLSession.shared.dataTask(with: request, completionHandler: {data, reposnse, error in
    
    if let error = error { print(error); return }
    guard let data = data  else { print("Data is missing"); return }
    do {
        let json = try JSONSerialization.jsonObject(with: data, options: []) as? [AnyHashable: Any]
        guard let data = json?["data"] as? [AnyHashable: [[AnyHashable: Any]]] else { return }
        guard let users = data["user"] else { return }
        users.forEach{user in
        guard let name = user["name"] else { return }
        print(name)
        }
        
    } catch let e {
        print("Parse error: \(e)")
    }
})
task.resume()

これでnameだけの取得ができます。
ただこれだとJSONに変換して文字列でvalueの取得をする必要があり、型のない世界になってしまします。
Codableでやってもいいですが、
queryに変更があった場合都度Modelクラスを手で直す必要がありミスに気づきにくい点があまりよくありません。

Apolloを使用すれば今あげた問題点を解決することができます。

導入

CocoaPods・Carthage両方対応に対応しています。

pod "Apollo

github "apollostack/apollo-ios"

必要なファイルをApollo-cliでダウンロード&生成する

Apollo-cliでclassの生成をするのでインストール
※Apollo-cliにはnodeが必要なので入っていなければ先にnodeをインストール

npm install -g apollo

schema.jsonを配置するディレクトリに移動し、Apollo-cliのコマンドを実行

apollo schema:download --endpoint="エンドポイント"

認証Headerが必要な場合

apollo schema:download --endpoint=エンドポイント --header="Authorization: OAuth <Token>"

schema.jsonはサーバー側で用意します。
schema.jsonは後述のAPI.swiftを生成するのに必要です。

コマンドが成功したら実行したディレクトリにschema.jsonがダウンロードされます。
次にschema.jsonがあるディレクトリでAPI.swiftを生成するコマンドを実行します。

apollo codegen:generate --queries="$(find . -name '*.graphql')" --schema=schema.json API.swift

指定したディレクトリにAPI.swiftを生成したい場合

apollo codegen:generate --queries="$(find . -name '*.graphql')" --schema=schema.json ./hoge/API.swift

上記のコマンドを実行したら指定したディレクトリに空のAPI.swiftが生成されます。
次に中身を生成するために必要な.graphqlファイルを作成します。

.graphqファイルを作る

Apolloを使用してGraphQLを叩く場合Queryは文字列でなく.graphql拡張子のファイルを作成してqueryを記述します。
一つのQueryに対して一つの.graphqlファイルを用意します。
⌘ + NでEmptyを選択し今回はnameを取得するファイルなのでName.graphqlとします。
※.graphqファイルはAPI.swfit生成コマンドを実行するディレクトリ配下に配置します。

query Query名 {
    取得する情報のkey
}

今回は全ユーザーのユーザー名を取得するQueryです。

query getAllUserName {
    user {
        name
    }
}

.graphqlファイルを作成したらもう一度API.swiftの生成コマンドを実行します。
実行すると先ほど作成したName.graphqlを読み込んでAPI.swiftの中身が生成されます。
API.swiftが生成されるときに.graphqlファイルの[クエリ名Query]というclassが生成されます。
例） GetAllUserNameQuery

Apolloを使用してGraphQLを叩く

let configuration: URLSessionConfiguration = .default
configuration.httpAdditionalHeaders = ["Content-Type": "application/json; charaset=utf-8",
                                       "Authorization": String(format: "OAuth %@", <TOKEN>)]
configuration.requestCachePolicy = .reloadIgnoringLocalCacheData

let apiPath: String = String(format: "エンドポイント")
let url = URL(string: apiPath)
let apollo = ApolloClient(networkTransport: HTTPNetworkTransport(url: url!, configuration: configuration,sendOperationIdentifiers: false))

//queryはapollo codegen:generateコマンドで生成されたGetAllUserNameQueryを指定
apollo.fetch(query: GetAllUserNameQuery, resultHandler: {(result, error) in
            
        guard let error = error else {
            print(error)
            return
        }
       
        //Userクラスの配列
        guard let users = result?.data?.name as? [GetAllUserNameQuery.Data.User] else { return }
        print(users[0].name)
    })