FlutterアプリにおけるGraphQLの効果的な使い方

2024/06/07 Flutter Meetup Tokyo #19 での登壇資料です。

GraphQLの基本からFlutterアプリでの活用方法までを解説します。

• GraphQLの紹介: Meta製のAPIクエリ言語であるGraphQLの基本概念とその利点について
• FlutterでGraphQLを使うことのメリット: MobileとBackendの分離による柔軟なデータ取得や、開発効率の向上について
• GraphQLライブラリの比較: Flutterで使用可能な主要GraphQLライブラリ（GraphQL Flutter, Ferry, Artemis）の特徴と注意点

Transcript

1. FlutterアプリにおけるGraphQLの効 果的な使い⽅ Sally, inc. CTO 茶屋愛太郎
2. ⽬次 1. ⾃⼰紹介 2. GraphQL の紹介 3. Flutter で GraphQL を使うことのメリット 4. Flutter で使える GraphQL ライブラリと注意点 5. まとめ 2
3. マダミスアプリ「ウズ」を開発しています。 名前 - 茶屋愛太郎 - X Account: @AitaroChaya 所属‧役職 - Sally, inc. CTO 元々、web系(Vue.js, Rails, …)をフルスタックでやっていたが、4年前にFlutterで アプリを作り始めた(Flutter歴4年) Flutter + Golang + React あたりを主に触っています。 ⾃⼰紹介 3
4. GraphQL の紹介 4
5. GraphQL は Meta 製 の API ⽤クエリ⾔語 モバイルで必要なデータだけ、柔軟に型安全で取得するためのツール 例) GitHub で flutter/flutter のレポジトリから、プルリクエストのリストとその制作者を取得した い GraphQL の紹介 API Request 5
6. Flutter における、Rest, GraphQL, gRPC の⽐較 GraphQL の紹介 API技術 特徴 Flutterでのサポート充実度 REST - シンプルで広く普及している ◎ 標準のhttpパッケージと高性能な dio パッケージが存 在 REST + Swagger - RESTにAPIドキュメントを追加して型安全に 扱えるように - Swagger UIで視覚化 △ openapi_generator が利用可能だが、利用者は少な い GraphQL - クライアント駆動のクエリ言語 - 必要なデータのみ取得 △ graphql_flutter 及び ferry が存在するがともに活発に はメンテナンスされていない gRPC - 高速なバイナリプロトコル - 型安全であり後方互換性もスキーマレベル で考慮されている。 ◯ 標準のgrpcパッケージは存在するが、エコシステム自 体はそれほど発達していない。 (注1) (注1) Google が gRPC 推しで、Google apis で内部的に gRPC を用いているので公式で手厚くサポートされている印象。 6
7. Flutter で GraphQL を使うことのメリット 7
8. Schema によって Backend と Mobile が分離し、Mobileサイドで柔軟に Queryを変更できる Flutter で GraphQL を使うことのメリット Mobileアプリの仕様変更やデザインの修正で、必要になるデータが変わることはプロダ クト開発上よくあること。 BackendのAPIを修正せずとも、新しい field を fetch したり、不要ななったデータの fetch できるようになることで、Flutter側単独で機能開発が可能になる。 Mutation Query (サーバーサイド Dart を採⽤しない限り)、サーバーサイドとFlutterは別の⾔語が採⽤さ れ、両⽅に精通しているエンジニアは少ない。 「ウズ」の技術構成の例 8
9. GraphQLのFragment Colocation と Flutter の Widgets が親和性⾼い Flutter は Widgets を⽤いて、宣⾔的に Widget Tree を構築していく。 どの Widget がどのデータを必要として いるかを Colocation(同じ場所に配置 する) ことで、親Widgetやデータfetch 層はどんなデータが必要か知る必要が なくなる。 また、GraphQLはnestしてデータを取 得できるので、⼀つのQueryでページに 必要な情報を全てとってこれる。 例) GitHub のモバイルアプリを実装す る場合 Flutter で GraphQL を使うことのメリット 9
10. Flutter で使える GraphQL ライブラリと注意点 10
11. GraphQL Flutter が安定しているが、Isolate Client に対応してない点は注意 Flutter で使える GraphQL ライブラリと注意点 GraphQL Flutter (Star: 3.2k) - graphql, graphql_flutter から成り⽴ち、 graphql_codegen は別の⼈がメンテしている。 - apollo参考にしており cacheの機構やrefetchの機構が充実している。 - ⼀時期メンテナーがいなくなっていたが、その後複数⼈に引き継がれた(がアクティブではない) - コード⽣成のアプローチは freezed にちかい - Isolate client に対応していない Ferry(Star: 588) - ferry, ferry_flutter, ferry_generator から成り⽴つ (generator を内蔵している) - cacheの機構やrefetchの機構はあるが、cache の永続化に対応していない - ⼀時期メンテナーがいなくなっていたが、その後引き継がれた - コード⽣成のアプローチは build_value にちかい - Isolate client に対応している Artemis(Star: 496) - deprecated されている 11
12. GraphQL Flutter でかつ複雑な query を扱う場合は、isolate client 相当の実装を⾃前 でする必要がある isolate client とは - GraphQL の client を メインスレッド上ではなく、Isolate 上で動かす。 なぜ isolate client が必要か - GraphQL の レスポンス結果は深くネストされることがある。このこと が、json のパースや cache のreadやwriteでパフォーマンス上ボトル ネックにる。 - graphQL の データフェッチ時にUIの描写がカクつかないようにするに は、isolate でこれらの処理を⾏う必要がある。 Flutter で使える GraphQL ライブラリと注意点 12
13. まとめ 13
14. Flutter で GraphQL を使おう 1. GraphQL と Flutter の親和性は⾼い a. Schemaでの分離 b. Fragment Collocation 2. GraphQL クライアントは⼀⻑⼀短なので適切に選ぶ必要あり a. isolate client b. キャッシュの永続化 新しくリリースされた Firebase Data Connect でも API インターフェースとして GraphQL が利⽤されてますので、みなさんどんどん Flutter で GraphQL を使いま しょう！ まとめ 14