Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOS app meets GraphQL

Ryosuke Ito
February 05, 2020

iOS app meets GraphQL

StudySapuri Meetup #4 の発表資料です。
https://techplay.jp/event/764168

Ryosuke Ito

February 05, 2020
Tweet

More Decks by Ryosuke Ito

Other Decks in Programming

Transcript

  1. #sapurimeetup Agenda | 01 02 03 04 05 自己紹介 &

    プロジェクト紹介 GraphQL と 良かったこと 困ったこと まとめ 71 iOS app meets GraphQL
  2. #sapurimeetup @manicmaniac / 伊東良輔 ➔ iOS Engineer at Quipper ➔

    iOS エンジニア歴7年くらい ➔ 2019年4月から中途で Quipper 入社 ◆ 2019年11月まで 主に新規事業 iOS アプリ開発 ◆ 2019年12月から Study Sapuri iOS アプリ開発 73 iOS app meets GraphQL
  3. #sapurimeetup 新規事業プロジェクト ➔ チーム構成 ◆ Product Manager 1人 ◆ Web

    developer 2人 → 7人 ◆ iOS developer 1人 → 2人 ◆ ほぼ全員 GraphQL 経験なし 75 iOS app meets GraphQL
  4. #sapurimeetup 新規事業プロジェクト ➔ GraphQL 利用状況 ◆ API ほぼ全て GraphQL ◆

    type (≒ resource) 50 種類くらい 規模 76 iOS app meets GraphQL
  5. #sapurimeetup GraphQL is a query language for your API, and

    a server-side runtime for executing queries by using a type system you define for your data. * https://graphql.org/learn/ API ため クエリ言語とそ 実行環境 79 iOS app meets GraphQL
  6. #sapurimeetup GraphQL 略歴 ➔ 2012年 Facebook 社内で開発開始 ◆ モバイルアプリ API

    改善 ため ➔ 2015年 React.js conf にて公開 ➔ 2016年 OSS として正式リリース ◆ Airbnb, GitHub, Twitter などが採用 80 * https://engineering.fb.com/core-data/graphql-a-data-query-language/ iOS app meets GraphQL
  7. #sapurimeetup GraphQL vs RESTful API (+ JSON Schema) ➔ 共通点

    ◆ HTTP 上に構築される規約 ◆ 強力な型を持つ Schema ◆ ドキュメント自動生成 82 iOS app meets GraphQL
  8. #sapurimeetup GraphQL vs RESTful API (+ JSON Schema) ➔ 相違点

    ◆ 原則 エンドポイント 1つだけ /graphql ◆ 原則 POST みでやりとり ◆ ステータスコード 常に 200 OK ◆ ネストしたリソースが取り扱える 83 iOS app meets GraphQL
  9. #sapurimeetup Schema type Query { hero(episode: Episode): Character } type

    Character { name: String! appearsIn: [Episode!]! } 84 iOS app meets GraphQL
  10. #sapurimeetup Query Request (GraphQL) { hero { name appearsIn }

    } 85 Response (JSON) { "data": { "hero": { "name": "R2-D2", "appearsIn": [ "NEWHOPE", "EMPIRE", "JEDI" ] } } } iOS app meets GraphQL
  11. #sapurimeetup Apollo iOS ➔ GraphQL クライアントライブラリ ◆ GraphQL Schema →

    Swift コード自動生成 • API クライアント 開発が不要 ◆ ローカルキャッシュ機能 • ネットワーク通信が最小限に抑えられる 89 iOS app meets GraphQL
  12. #sapurimeetup query AllPosts { posts { title author { name

    } } } 強力な型とコード自動生成 90 こういう query をあらかじめ定義してお くと iOS app meets GraphQL
  13. #sapurimeetup public final class AllPostsQuery: GraphQLQuery { public struct Data:

    GraphQLSelectionSet { public var posts: [Post] { get set } public struct Post: GraphQLSelectionSet { public var title: String { get set } public var author: Author { get set } public struct Author: GraphQLSelectionSet { public var name: String { get set } } } } } 強力な型とコード自動生成 91 こんな感じ Swift コードに変換 iOS app meets GraphQL
  14. #sapurimeetup 動作する API ドキュメント ➔ GraphiQL (ɡrafək(ə)l), Altair など GraphQL

    クライアントを利用 ◆ Open API (Swagger) ようなも ◆ query を直接発行して確認できる ◆ Schema を利用して補完が利くエディタ付き 94 iOS app meets GraphQL
  15. #sapurimeetup デバッグ 困難 ➔ サーバーとクライアント 原因切り分けが困難 ◆ クライアント側で query を自由に組み立て可能

    • 「こ query どういう場面で使ってる?」 ◆ URL やステータスコードからエラーが推測できない • ログ 全部 /graphql で 200 OK 101 iOS app meets GraphQL
  16. #sapurimeetup デバッグツールについて ➔ Apollo Client Developer Tools を利用 ◆ 検証用

    iOS 端末に HTTP サーバーを立てる • React Native Debugger を参考 ◆ ブラウザからアクセスする ◆ そ 場で query 編集→発行できる 103 iOS app meets GraphQL
  17. #sapurimeetup デバッグ 困難 ➔ Schema 不一致 ◆ コード生成に必要な で、コンパイル時点で Schema

    を使う • サーバー環境によって Schema が違う ◦ staging / develop / release / production ◆ わかりにくいエラーにつながる 106 iOS app meets GraphQL
  18. #sapurimeetup デバッグ 困難 ➔ Schema 不一致 ◆ Circle CI を使って

    release 環境 schema 変更を監視 • 変更があったら自動で PR を作成してテストを回す ◆ 作業ブランチで 手動で任意 schema に書き換えて良い 107 iOS app meets GraphQL
  19. #sapurimeetup API 設計 困難 ➔ GraphQL で 原則 API バージョニングしない

    ◆ 代わりに deprecation を使う ◆ 名前 変更や、型 変更をしたい場合にちょっと面倒 109 iOS app meets GraphQL
  20. #sapurimeetup まとめ ➔ 高 かつ堅牢な開発を支援する機能が揃っていた ◆ Schema・コード自動生成・API ドキュメント ➔ デバッグ

    難しかったが、工夫してなんとかできた ➔ 本番運用 知見が十分に得られた 111 iOS app meets GraphQL
  21. #sapurimeetup まとめ ➔ Quipper における GraphQL 未来 ◆ Study Sapuri

    本体でも一部 GraphQL を導入し始めている • まだモバイルと 通信部分 すべて RESTful API • 既存 API から 移行 大変… 112 iOS app meets GraphQL