TanStackDBについて調べてみた

TanStack DBとは？

TanStack QueryやRouter, Table, Formなどフロントエンドにおけるヘッドレス系ライブラリ群における新ライブラリ。
フロントエンド側に永続化層=DBを設け、コンポーネント側でそれをクエリする、クエリファーストなAPI。
TanStack シリーズといえば、Reactに限らずVue, Svelte, Solidなど様々なUIフレームワークをサポートしている点も魅力。

誰が支援している？

Code Rabbit
Electric
Prisma

その設計思想とは

client side querying

使い方

useLiveQuery

TanStack DB 、なにが美味しい？

永続化層を自由に差し替えが可能

バックエンド実装が不要になる可能性

特定のSaaSに依存せずにフロントエンド側でデータがクエリ可能に。
RLSと組み合わせることで、必要なデータだけをフロントと同期する設計が可能に。

状態管理のベストプラクティスに変化があるかも！？

オンメモリ、localStorageなどのアダプターが用意されており、バックエンド同期なしでの利用も可能です。
従来のRESTAPIとの統合も可能です。
スキーマを定義して、それを使用側で部分Subscribeが可能。
つまり、ZustandやJotaiで管理しているような状態があるとするなら、それらをスキーマとSQLライクなクエリのコレクションに置き換えが可能！
永続化層が必要なかったとしてもデータの保管に使えそうです。
大幅に認知負荷を下げられる可能性

まとめ

TanStack DB はフロントエンドの状態管理だけでなく、バックエンド含めた設計手法にも影響を

記事にした。
https://zenn.dev/bmth/articles/tanstack-db-csq