Zenn
🎃

Apollo iOSで簡単アプリ開発

2022/03/22に公開
GraphQL
iOS
Swift
Xcode
Apollo
tech

環境

macOS Monterey 12.2.1
XCode 13.2

プロジェクトの作成

  1. XCodeを開いて「Create a new Xcode Project」を選択
  2. 「Choose a template for your new project:」からApplication→Appを選択
  3. projectの情報を色々入力していく(今回InterfaceはSwiftUIを使用する)
  4. 保存先を選択してcreate

パッケージの導入

ProjectにApolloなどのパッケージを導入する

  1. File→Add Packages...を選択
  2. 左のサーチバーから「apollo-ios」で検索
  3. 出てきたパッケージを選択してAdd Package
  4. Apolloの中でもいつくかパッケージが分かれているので必要なものだけを選択しAdd Package
  5. パッケージの追加は完了🎉

Apolloの設定

  1. 対象のGraphQLサーバからschema.jsonをダウンロードする
  2. ダウンロードしたschema.jsonを[Project名]/[Project名]/に配置する
├── TTApp
│   ├── Assets.xcassets
│   │   ├── AccentColor.colorset
│   │   │   └── Contents.json
│   │   ├── AppIcon.appiconset
│   │   │   └── Contents.json
│   │   └── Contents.json
│   ├── ContentView.swift
│   ├── Preview Content
│   │   └── Preview Assets.xcassets
│   │       └── Contents.json
│   ├── TTAppApp.swift
│   └── schema.json // ←追加
  1. 2で設置したschema.jsonをXcodeの[Project名]/[Project名]下にドラッグアンドドロップ
  2. TARGETS→Build Phasesへ
  3. 左上の+ボタンから「New Run Script Phase」をクリック
  4. スクリプトの名前をいい感じに変更(Generate GraphQL APIなど)
  5. 以下のスクリプトをコピー&ペーストする
# Don't run this during index builds
if [ $ACTION = "indexbuild" ]; then exit 0; fi

# Go to the build root and search up the chain to find the Derived Data Path where the source packages are checked out.
DERIVED_DATA_CANDIDATE="${BUILD_ROOT}"

while ! [ -d "${DERIVED_DATA_CANDIDATE}/SourcePackages" ]; do
  if [ "${DERIVED_DATA_CANDIDATE}" = / ]; then
    echo >&2 "error: Unable to locate SourcePackages directory from BUILD_ROOT: '${BUILD_ROOT}'"
    exit 1
  fi

  DERIVED_DATA_CANDIDATE="$(dirname "${DERIVED_DATA_CANDIDATE}")"
done

# Grab a reference to the directory where scripts are checked out
SCRIPT_PATH="${DERIVED_DATA_CANDIDATE}/SourcePackages/checkouts/apollo-ios/scripts"

if [ -z "${SCRIPT_PATH}" ]; then
    echo >&2 "error: Couldn't find the CLI script in your checked out SPM packages; make sure to add the framework to your project."
    exit 1
fi

cd "${SRCROOT}/${TARGET_NAME}"
"${SCRIPT_PATH}"/run-bundled-codegen.sh codegen:generate --target=swift --includes=./**/*.graphql --localSchemaFile="schema.json" API.swift
  1. 作成したスクリプトをドラッグして「Compile Sources」の上に持ってくる

クエリの作成

  1. GraphQL用のディレクトリを作成
├── TTApp
│   ├── Assets.xcassets
│   │   ├── AccentColor.colorset
│   │   │   └── Contents.json
│   │   ├── AppIcon.appiconset
│   │   │   └── Contents.json
│   │   └── Contents.json
│   ├── ContentView.swift
│   ├── GraphQL // ←追加
│   ├── Preview Content
│   │   └── Preview Assets.xcassets
│   │       └── Contents.json
│   ├── TTAppApp.swift
│   └── schema.json
  1. GraphQLディレクトリ配下にクエリ用のファイルを作成(Other→Emptyのtemplateを選択)
├── TTApp
│   ├── Assets.xcassets
│   │   ├── AccentColor.colorset
│   │   │   └── Contents.json
│   │   ├── AppIcon.appiconset
│   │   │   └── Contents.json
│   │   └── Contents.json
│   ├── ContentView.swift
│   ├── GraphQL
│   │   └── users.graphql // ←追加
│   ├── Preview Content
│   │   └── Preview Assets.xcassets
│   │       └── Contents.json
│   ├── TTAppApp.swift
│   └── schema.json
  1. 実際に使用するクエリをペースト
  2. ビルド
  3. finderなどをみるとAPI.swiftというファイルが新たに生成されているのでXcodeのファイルメニューにドラッグ&ドロップ

実際にコールしてみる

  1. 新しくNetwork.swiftというファイルを作成
  2. clientの作成を記述(urlは各々のURLを記述)
import Foundation
import Apollo

class Network {
    static let shared = Network()

    private(set) lazy var apollo = ApolloClient(
        url: URL(string: "http://192.168.1.100:5000/graphql")!
    )
}
  1. 実際に以下のように呼び出すことができる
    func loadData() {
        Network.shared.apollo.fetch(query: UsersQuery()) { result in
            switch result {
            case .success(let data):
		// do something
            case .failure(let error):
	        // do something
            }
        }
    }

まとめ

今までReactのみでしか使ったことのないApolloだったが、iOSの方でも意外と簡単に設定などができた
iOSやXcodeを触ったことのない人はBuildPhases周りの設定でちょっと詰まるかも
ただ、公式ドキュメントが親切なのでこれ通りにすればうまくできるようにはなっている
型やクエリの生成なども自動でやってくれるのですっごい便利

Discussion