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

iOS app meets GraphQL

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 iOS app meets GraphQL @manicmaniac Study Sapuri/Quipper Product Meetup

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

    プロジェクト紹介 GraphQL と 良かったこと 困ったこと まとめ 71 iOS app meets GraphQL
  3. #sapurimeetup 自己紹介 & プロジェクト紹介 01 72 iOS app meets GraphQL

  4. #sapurimeetup @manicmaniac / 伊東良輔 ➔ iOS Engineer at Quipper ➔

    iOS エンジニア歴7年くらい ➔ 2019年4月から中途で Quipper 入社 ◆ 2019年11月まで 主に新規事業 iOS アプリ開発 ◆ 2019年12月から Study Sapuri iOS アプリ開発 73 iOS app meets GraphQL
  5. #sapurimeetup 新規事業プロジェクト ➔ 製品 ◆ Study Sapuri と同じような目的を持つ別アプリ ◆ 完全新規開発

    ◆ フロント iOS み ◆ 開発期間1年半くらい 74 iOS app meets GraphQL
  6. #sapurimeetup 新規事業プロジェクト ➔ チーム構成 ◆ Product Manager 1人 ◆ Web

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

    type (≒ resource) 50 種類くらい 規模 76 iOS app meets GraphQL
  8. #sapurimeetup 新規事業プロジェクト ➔ なぜ GraphQL ? ◆ モチベーション高いメンバーがいた ◆ 新規開発にかこつけて知見を貯めたかった

    • Micro Services 化も 77 iOS app meets GraphQL
  9. #sapurimeetup GraphQL と 02 78 iOS app meets GraphQL

  10. #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
  11. #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
  12. #sapurimeetup ここから誤解を恐れない GraphQL 簡単な説明 81 iOS app meets GraphQL

  13. #sapurimeetup GraphQL vs RESTful API (+ JSON Schema) ➔ 共通点

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

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

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

    } 85 Response (JSON) { "data": { "hero": { "name": "R2-D2", "appearsIn": [ "NEWHOPE", "EMPIRE", "JEDI" ] } } } iOS app meets GraphQL
  17. #sapurimeetup 良かったこと 03 86 iOS app meets GraphQL

  18. #sapurimeetup 良かったこと ➔ 強力な型とコード自動生成 ◆ API クライアント 開発が不要に • クライアントライブラリ

    (Apollo) が必要 ➔ 動作する API ドキュメント 87 iOS app meets GraphQL
  19. #sapurimeetup Apollo iOS 88 iOS app meets GraphQL

  20. #sapurimeetup Apollo iOS ➔ GraphQL クライアントライブラリ ◆ GraphQL Schema →

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

    } } } 強力な型とコード自動生成 90 こういう query をあらかじめ定義してお くと iOS app meets GraphQL
  22. #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
  23. #sapurimeetup 強力な型とコード自動生成 92 iOS app meets GraphQL

  24. #sapurimeetup 良かったこと ➔ 強力な型とコード自動生成 ◆ API クライアント 開発が不要に • クライアントライブラリ

    (Apollo) が必要 ➔ 動作する API ドキュメント 93 iOS app meets GraphQL
  25. #sapurimeetup 動作する API ドキュメント ➔ GraphiQL (ɡrafək(ə)l), Altair など GraphQL

    クライアントを利用 ◆ Open API (Swagger) ようなも ◆ query を直接発行して確認できる ◆ Schema を利用して補完が利くエディタ付き 94 iOS app meets GraphQL
  26. #sapurimeetup 95 iOS app meets GraphQL

  27. #sapurimeetup 困ったこと 04 96 iOS app meets GraphQL

  28. #sapurimeetup メンバーに知見がなかった 97 iOS app meets GraphQL

  29. #sapurimeetup RESTful API に戻す? 98 iOS app meets GraphQL

  30. #sapurimeetup 99 iOS app meets GraphQL

  31. #sapurimeetup 困ったこと ➔ デバッグ 困難 ◆ サーバーとクライアント 原因切り分けが困難 ◆ スキーマ

    不一致 ➔ API 設計 困難 ◆ 後方互換性 担保 100 iOS app meets GraphQL
  32. #sapurimeetup デバッグ 困難 ➔ サーバーとクライアント 原因切り分けが困難 ◆ クライアント側で query を自由に組み立て可能

    • 「こ query どういう場面で使ってる?」 ◆ URL やステータスコードからエラーが推測できない • ログ 全部 /graphql で 200 OK 101 iOS app meets GraphQL
  33. #sapurimeetup デバッグ 困難 ➔ サーバーとクライアント 原因切り分けが困難 ◆ デバッグツールを検証環境 アプリに仕込んだ ◆

    全員が GraphQL 通信を見られるように 102 iOS app meets GraphQL
  34. #sapurimeetup デバッグツールについて ➔ Apollo Client Developer Tools を利用 ◆ 検証用

    iOS 端末に HTTP サーバーを立てる • React Native Debugger を参考 ◆ ブラウザからアクセスする ◆ そ 場で query 編集→発行できる 103 iOS app meets GraphQL
  35. #sapurimeetup 104

  36. #sapurimeetup https://quipper.hatenablog.com/entry/2019/08/13/making-tool-to-debug-graphql-client 105 iOS app meets GraphQL

  37. #sapurimeetup デバッグ 困難 ➔ Schema 不一致 ◆ コード生成に必要な で、コンパイル時点で Schema

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

    release 環境 schema 変更を監視 • 変更があったら自動で PR を作成してテストを回す ◆ 作業ブランチで 手動で任意 schema に書き換えて良い 107 iOS app meets GraphQL
  39. #sapurimeetup 108 iOS app meets GraphQL

  40. #sapurimeetup API 設計 困難 ➔ GraphQL で 原則 API バージョニングしない

    ◆ 代わりに deprecation を使う ◆ 名前 変更や、型 変更をしたい場合にちょっと面倒 109 iOS app meets GraphQL
  41. #sapurimeetup まとめ 05 110 iOS app meets GraphQL

  42. #sapurimeetup まとめ ➔ 高 かつ堅牢な開発を支援する機能が揃っていた ◆ Schema・コード自動生成・API ドキュメント ➔ デバッグ

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

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

  45. #sapurimeetup 114 iOS app meets GraphQL

  46. #sapurimeetup ご清聴ありがとうございました 115 iOS app meets GraphQL