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

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

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

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

Avatar for Takuma Osada

Takuma Osada

July 10, 2025
Tweet

More Decks by Takuma Osada

Other Decks in Programming

Transcript

  1. 2 自 己 紹介 長田 卓 馬 株式会社WinTicket 2 1

    年度新卒 入 社 ポケカ(紙)が最近熱いです • GitHub ID: ostk 0 0 6 9 • X ID: ostk 0 0 6 9
  2. 3 AGENDA • Riverpod の課題 • TanStack Query / fquery

    の紹介 • fquery を使う際の課題 • まとめ
  3. 4 本 日 のゴールと注意 ゴール • Riverpod と TanStack Query

    について理解し、それぞれのキャッシュ戦略について理解する 注意 • Riverpod を否定をするつもりはありません。 私 自身 、Riverpod は 非 常に素晴らしい package だと思っ ています • fquery の 方 が優秀という話でもありません。今回 fquery は TanStack Query を dart で伝えることを 目 的 に紹介します。fquery への置き換えを推奨するものでもありません。
  4. 7 Riverpod の課題 Riverpod 課題 • 多機能 • v 2

    以降で provider の 自 動 生 成を使う際の 自 動 生 成コストの増加 • 多くのアーキテクチャレイヤーへの依存 • Breaking Changes での影響範囲
  5. 8 Riverpod の課題 Riverpod 課題の深掘り • 多機能 • チーム独 自

    の制約を設けて扱うケースも拝 見 される • v 2 以降で provider の 自 動 生 成を使う際の 自 動 生 成コストの増加 • 多くのアーキテクチャレイヤーへの依存 • 上位レイヤーの Provider 化 • UI の ComsumerWidget 化 • Breaking Changes での影響範囲 • 上位の結果、アプリケーション全体に影響を与え、置き換え難易度が 高 い
  6. 9 Riverpod の課題 Riverpod 課題 • 多機能 • チーム独 自

    の制約を設けて扱うケースが拝 見 される • v 2 以降でprovider の 自 動 生 成を使う際の 自 動 生 成コストの増加 • 多くのアーキテクチャレイヤーへの依存 • 上位レイヤーのProvider化 • UIのComsumerWidget化 • Breaking Changes での影響範囲 • アプリケーション全体に影響を与える もう少し、薄くて状態管理可能な ライブラリないのか 🧐
  7. 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
  8. 1 2 TanStack Query / fquery の紹介 Server Stateについて Global

    State • 複数の画 面 やコンポーネントで共有する状態のうちサーバーに保存不要なもの。UserDefaults 、 SharedPreference が代表例。 Server State • データベース等に永続化されたサーバーから取得するもの Local State • 単 一 のコンポーネントだけが持っているもの、Hooks の useState が代表例。
  9. 1 3 TanStack Query / fquery の紹介 Server Stateについて Global

    State • 複数の画 面 やコンポーネントで共有する状態のうちサーバーに保存不要なもの。UserDefaults 、 SharedPreference が代表例。 Server State • データベース等に永続化されたサーバーから取得するもの Local State • 単 一 のコンポーネントだけが持っているもの、Hooks の useState が代表例。 3つ全ての状態管理ができる Riverpod に対して、 Tanstack Query は Server Stateを管理するために作成された
  10. 1 4 TanStack Query / fquery の紹介 それぞれの特性 データの更新者 キャッシュの更新が把握できる

    Riverpod で管理可能か TanStack Query で管理可能か Server Global Local Server アプリ内部 ✅ アプリ内部 ❌ ✅ ✅ ✅ ✅ ❌ ✅ ❌ Hooksが良さそう
  11. 1 5 TanStack Query / fquery の紹介 それぞれの特性 データの更新者 キャッシュの更新が把握できる

    Riverpod で管理可能か TanStack Query で管理可能か Server Global Local Server アプリ内部 ✅ アプリ内部 ❌ ✅ ✅ ✅ ✅ ❌ ✅ ❌ アプリ開発において Server State の状態管理は他とは 考慮するポイントが異なる
  12. 1 6 fqueryについて TanStack Query、swr の考えを利 用 して fl utter

    で同じような動きをする package 。 TanStack Query / fquery の紹介 https://github.com/ 4 1 y 0 8 h/fquery
  13. 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
  14. 1 9 fqueryのサンプルコード解説 - useQuery TanStack Query / fquery の紹介

    https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#queries
  15. 2 0 fqueryのサンプルコード解説 - useQuery TanStack Query / fquery の紹介

    https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#queries
  16. 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
  17. 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
  18. 2 3 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介

    https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations
  19. 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 を実 行 する。
  20. 2 5 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介

    https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations API処理でエラーが起きた場合の処理を書く
  21. 2 6 fqueryのサンプルコード解説 - useMutation TanStack Query / fquery の紹介

    https://github.com/ 4 1 y 0 8 h/fquery?tab=readme-ov- fi le#mutations 成功/エラーに関わらず、 処理が終了した際の処理を書く
  22. 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が 行 われる
  23. 2 8 補 足 : TanStack Query (fquery) の invalidate

    と Riverpod の invalidate の違い Riverpod の場合、invalidate が実 行 された瞬間に Stateが保持していた値が破棄される。 AsyncValue は loading の状態に変わる。TanStack Query は再取得が 走 っている間も昔の値が参照可能。 TanStack Query / fquery の紹介
  24. 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/
  25. 3 1 • query key の管理が難しい • Selector に対応していない •

    テスト 方 法について明記がない • いくつかの不具合報告を受けてv 2 の開発を 行 っている • https://github.com/ 4 1 y 0 8 h/fquery/issues/ 4 7 • ドキュメントの不 十 分さ • v2のタイミングで拡充に向けて動くとのこと fquery の課題
  26. 3 2 • query key の管理が難しい • Selector に対応していない •

    テスト 方 法について明記がない • いくつかの不具合報告を受けてv 2 の開発を 行 っている • https://github.com/ 4 1 y 0 8 h/fquery/issues/ 4 7 • ドキュメントの不 十 分さ • v2のタイミングで拡充に向けて動くとのこと fquery の課題 これら3つ対して改善を考える
  27. 3 3 query key の管理が難しい React には TanStack Query の公式ドキュメントで紹介されている

    lukemorales/query-key-factory が存在 する。 fquery の課題 https://github.com/lukemorales/query-key-factory
  28. 3 4 query key の管理が難しい また、別の記事では feature 毎に管理する、API の設計に寄せるなど Colocation

    を意識することを推奨い る fquery の課題 https://tkdodo.eu/blog/e ff ective-react-query-keys#use-query-key-factories
  29. 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
  30. 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 を作成する
  31. 3 9 Selector に対応していない API から受け取った値を UI に描画させるために構造を変える必要がある場合に利 用 する

    Dart の場合型の制約上、useQuery に select 関数を作成しても返り値の型を変えることが難しい。 QueryBuilder の形式であれば可能だが、useQuery のケースだと厳しい。 fquery の課題 https://tanstack.com/query/v 4 /docs/framework/react/reference/useQuery
  32. 4 0 テスト 方 法について明記がない 既存実装だと ロジックをすべて コンポーネント側に書くことになるのでテストが難しかった。 createQuery のように

    query の部分を切り出す 方 法を採 用 することで、テストファイルを別の階層に切り 出すことができる。 ※ サンプルレポジトリでテストコード含め書いていますが、WidgetTestを使ってしまっています。 時間の都合でできていませんが、最終的には WidgetTest 卒業したいと考えています。 fquery の課題
  33. 4 1 createQuery, useQuery, custom_lint, テストコード(Widget Test) のサンプル fquery の課題

    https://github.com/ostk 0 0 6 9 /fquery/tree/feat/customize-use-query
  34. 4 2 • Riverpod と TanStack Query (fquery) は何を状態管理するかのスコープが異なる •

    fl utter で SWR(Stale-While-Revalidate) のキャッシュ戦略を使いたい場合は周辺のエコシステムが成熟す る必要がありそう • Riverpod は Global State 扱う上でも 非 常に優秀なので脱 Riverpod は難しいかも まとめ