脱Riverpod？fqueryで考える、TanStack Queryライクなアーキテクチャの可能性

TanStack Queryは近年Web開発でよく使われるサーバー状態管理ライブラリで、その思想をDartに持ち込んだのがfqueryです。 fqueryを使ったアプローチを紹介しつつ、Riverpodとの違いや、今後のアーキテクチャの選択肢としてどう位置づけられるかを考察します。

Transcript

1. 長田 卓 馬 株式会社サイバーエージェント Flutterエンジニア 脱 Riverpod？ fquery で考える、 TanStack Query ライクなアーキテクチャの可能性
2. 2 自 己 紹介 長田 卓 馬 株式会社WinTicket 2 1 年度新卒 入 社 ポケカ(紙)が最近熱いです • GitHub ID: ostk 0 0 6 9 • X ID: ostk 0 0 6 9
3. 3 AGENDA • Riverpod の課題 • TanStack Query / fquery の紹介 • fquery を使う際の課題 • まとめ
4. 4 本 日 のゴールと注意 ゴール • Riverpod と TanStack Query について理解し、それぞれのキャッシュ戦略について理解する 注意 • Riverpod を否定をするつもりはありません。 私 自身 、Riverpod は 非 常に素晴らしい package だと思っ ています • fquery の 方 が優秀という話でもありません。今回 fquery は TanStack Query を dart で伝えることを 目 的 に紹介します。fquery への置き換えを推奨するものでもありません。
5. 5 Riverpod の課題
6. 6 Riverpod の課題 Riverpod とは Remi Rousselet 氏 によって開発された状態管理ライブラリ。 多くのプロダクトでの採 用 事例があり、ドキュメントも豊富。 https://riverpod.dev/
7. 7 Riverpod の課題 Riverpod 課題 • 多機能 • v 2 以降で provider の 自 動 生 成を使う際の 自 動 生 成コストの増加 • 多くのアーキテクチャレイヤーへの依存 • Breaking Changes での影響範囲
8. 8 Riverpod の課題 Riverpod 課題の深掘り • 多機能 • チーム独 自 の制約を設けて扱うケースも拝 見 される • v 2 以降で provider の 自 動 生 成を使う際の 自 動 生 成コストの増加 • 多くのアーキテクチャレイヤーへの依存 • 上位レイヤーの Provider 化 • UI の ComsumerWidget 化 • Breaking Changes での影響範囲 • 上位の結果、アプリケーション全体に影響を与え、置き換え難易度が 高 い
9. 9 Riverpod の課題 Riverpod 課題 • 多機能 • チーム独 自 の制約を設けて扱うケースが拝 見 される • v 2 以降でprovider の 自 動 生 成を使う際の 自 動 生 成コストの増加 • 多くのアーキテクチャレイヤーへの依存 • 上位レイヤーのProvider化 • UIのComsumerWidget化 • Breaking Changes での影響範囲 • アプリケーション全体に影響を与える もう少し、薄くて状態管理可能な ライブラリないのか 🧐
10. 1 0 TanStack Query / fquery の紹介
11. 1 1 TanStack Query / fquery の紹介 TanStack Query について react-query と昔は呼ばれていた、現在は TanStack Query に変更された。 Server State (サーバーデータのキャッシュ)の状態管理を 行 うためのライブラリ。 TanStack Query は SWR(Stale-While-Revalidate) という戦略をキャッシュ周りに採 用 し、キャッシュが stale (古くなった) と判断されるまではそのままキャッシュを返し、stale と判断された後はキャッシュを返 しつつ裏で新しいデータを取得し更新する。 https://tanstack.com/query/latest/docs/framework/react/overview https://swr.vercel.app/ja https://datatracker.ietf.org/doc/html/rfc 5 8 6 1 https://web.dev/case-studies/ads-case-study-stale-while-revalidate?hl=ja#live-example
12. 1 2 TanStack Query / fquery の紹介 Server Stateについて Global State • 複数の画 面 やコンポーネントで共有する状態のうちサーバーに保存不要なもの。UserDefaults 、 SharedPreference が代表例。 Server State • データベース等に永続化されたサーバーから取得するもの Local State • 単 一 のコンポーネントだけが持っているもの、Hooks の useState が代表例。
13. 1 3 TanStack Query / fquery の紹介 Server Stateについて Global State • 複数の画 面 やコンポーネントで共有する状態のうちサーバーに保存不要なもの。UserDefaults 、 SharedPreference が代表例。 Server State • データベース等に永続化されたサーバーから取得するもの Local State • 単 一 のコンポーネントだけが持っているもの、Hooks の useState が代表例。 3つ全ての状態管理ができる Riverpod に対して、 Tanstack Query は Server Stateを管理するために作成された
14. 1 4 TanStack Query / fquery の紹介 それぞれの特性 データの更新者 キャッシュの更新が把握できる Riverpod で管理可能か TanStack Query で管理可能か Server Global Local Server アプリ内部 ✅ アプリ内部 ❌ ✅ ✅ ✅ ✅ ❌ ✅ ❌ Hooksが良さそう
15. 1 5 TanStack Query / fquery の紹介 それぞれの特性 データの更新者 キャッシュの更新が把握できる Riverpod で管理可能か TanStack Query で管理可能か Server Global Local Server アプリ内部 ✅ アプリ内部 ❌ ✅ ✅ ✅ ✅ ❌ ✅ ❌ アプリ開発において Server State の状態管理は他とは 考慮するポイントが異なる
16. 1 6 fqueryについて TanStack Query、swr の考えを利 用 して fl utter で同じような動きをする package 。 TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery
17. 1 7 fqueryのサンプルコード解説 TanStack Query / fquery の紹介
18. 1 8 fqueryのサンプルコード解説 - useQuery 一 意な Key とデータフェッチのための関数をセットしたもの。データ取得のために使 用 する。 keyはキャッシュの識別 子 として使われる。 TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#queries
19. 1 9 fqueryのサンプルコード解説 - useQuery TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#queries
20. 2 0 fqueryのサンプルコード解説 - useQuery TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#queries
21. 2 1 fqueryのサンプルコード解説 - useIn fi niteQuery TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#queries
22. 2 2 fqueryのサンプルコード解説 - useMutation データ更新 ( CRUD で 言 う、create / update / delete ) を 行 うために 用 いる。 API の実 行 を 行 う関数と、関数が成功した際に発 火 する onSuccess、 失敗した時に発 火 する onError、失敗 成功に関わらず発 火 する onSettled が 用 意されている。 TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations
23. 2 3 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations
24. 2 4 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations この関数内でAPIの処理を実 行 し、 setQueryData を実 行 する。
25. 2 5 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations API処理でエラーが起きた場合の処理を書く
26. 2 6 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations 成功/エラーに関わらず、 処理が終了した際の処理を書く
27. 2 7 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations 指定された Key の Query は stale (古くなった) 状態に なったことを伝える。また、query に対して裏側で 最新の状態になるためのfetchが 行 われる
28. 2 8 補 足 : TanStack Query (fquery) の invalidate と Riverpod の invalidate の違い Riverpod の場合、invalidate が実 行 された瞬間に Stateが保持していた値が破棄される。 AsyncValue は loading の状態に変わる。TanStack Query は再取得が 走 っている間も昔の値が参照可能。 TanStack Query / fquery の紹介
29. 2 9 補 足 : GraphQLでも実現できる fl utter graphql を書くための package 群 zino-hofmann/graphql- fl utter は useQuery を提供しており、 GraphQL を採 用 していれば、これを使うことで今回やりたいことを実現可能。 TanStack Query / fquery の紹介 https://zino-hofmann.github.io/graphql- fl utter/
30. 3 0 fquery の課題
31. 3 1 • query key の管理が難しい • Selector に対応していない • テスト 方 法について明記がない • いくつかの不具合報告を受けてv 2 の開発を 行 っている • https://github.com/ 4 1 y 0 8 h/fquery/issues/ 4 7 • ドキュメントの不 十 分さ • v2のタイミングで拡充に向けて動くとのこと fquery の課題
32. 3 2 • query key の管理が難しい • Selector に対応していない • テスト 方 法について明記がない • いくつかの不具合報告を受けてv 2 の開発を 行 っている • https://github.com/ 4 1 y 0 8 h/fquery/issues/ 4 7 • ドキュメントの不 十 分さ • v2のタイミングで拡充に向けて動くとのこと fquery の課題 これら3つ対して改善を考える
33. 3 3 query key の管理が難しい React には TanStack Query の公式ドキュメントで紹介されている lukemorales/query-key-factory が存在 する。 fquery の課題 https://github.com/lukemorales/query-key-factory
34. 3 4 query key の管理が難しい また、別の記事では feature 毎に管理する、API の設計に寄せるなど Colocation を意識することを推奨い る fquery の課題 https://tkdodo.eu/blog/e ff ective-react-query-keys#use-query-key-factories
35. 3 5 query key の管理が難しい - 改善してみる fquery の課題 https://github.com/ostk 0 0 6 9 /fquery/tree/feat/customize-use-query
36. 3 6 query key の管理が難しい - 改善してみる fquery の課題 https://github.com/ostk 0 0 6 9 /fquery/tree/feat/customize-use-query lib/page/post_page.dart lib/page/post_page.dart lib/query/post_query.dart
37. 3 7 query key の管理が難しい - 改善してみる fquery の課題 https://github.com/ostk 0 0 6 9 /fquery/tree/feat/customize-use-query lib/page/post_page.dart lib/page/post_page.dart lib/query/post_query.dart Key の 一 意性を担保させるために custom_lint を作成する
38. 3 8 Selector に対応していない API から受け取った値を UI に描画させるために構造を変える必要がある場合に利 用 する fquery の課題 https://tanstack.com/query/v 4 /docs/framework/react/reference/useQuery
39. 3 9 Selector に対応していない API から受け取った値を UI に描画させるために構造を変える必要がある場合に利 用 する Dart の場合型の制約上、useQuery に select 関数を作成しても返り値の型を変えることが難しい。 QueryBuilder の形式であれば可能だが、useQuery のケースだと厳しい。 fquery の課題 https://tanstack.com/query/v 4 /docs/framework/react/reference/useQuery
40. 4 0 テスト 方 法について明記がない 既存実装だと ロジックをすべて コンポーネント側に書くことになるのでテストが難しかった。 createQuery のように query の部分を切り出す 方 法を採 用 することで、テストファイルを別の階層に切り 出すことができる。 ※ サンプルレポジトリでテストコード含め書いていますが、WidgetTestを使ってしまっています。 時間の都合でできていませんが、最終的には WidgetTest 卒業したいと考えています。 fquery の課題
41. 4 1 createQuery, useQuery, custom_lint, テストコード(Widget Test) のサンプル fquery の課題 https://github.com/ostk 0 0 6 9 /fquery/tree/feat/customize-use-query
42. 4 2 • Riverpod と TanStack Query (fquery) は何を状態管理するかのスコープが異なる • fl utter で SWR(Stale-While-Revalidate) のキャッシュ戦略を使いたい場合は周辺のエコシステムが成熟す る必要がありそう • Riverpod は Global State 扱う上でも 非 常に優秀なので脱 Riverpod は難しいかも まとめ
43. 4 3 ご清聴ありがとうございました 🙌