TanStack Query

Hono + React + Chart.js + TanStack Router + TanStack Query を使って、Hono製APIのレスポンスをPie chartとして表示してみた

前回、Chart.jsのPie chartをReactで表示してみました。 React + react-chartjs-2 + Chart.js を使って、Pie chart を表示してみた - メモ的な思考的な その続きとして、次はバックエンドからのレスポンスを React + Charts.js で描画したくなりました。 バ…

TanStack QueryのuseQueryにて、refetchIntervalとstaleTimeを組み合わせたときの動作を確認してみた

TanStack Queryの useQuery には refetchInterval という設定値があります。 以下の公式ドキュメントにある通り、これは定期的にデータ取得を行うための設定のようです。これを使うことにより、APIへのポーリングも容易に実装できそうです。 refetchInterval…

TanStack Queryにて、useQueryのstaleTimeとcacheTimeの挙動を確認してみた

TanStack Queryの useQuery を使うとき staleTime cacheTime という2つの設定値があります。 それらの違いについてよく分からなかったので調べてみたところ、Githubのdiscussionsに色々記載がありました。 staleTime vs cacheTime · TanStack/query · Discus…

TanStack QueryにおけるuseQueryのselectオプションを調べてみた

TanStack Queryの useQuery のドキュメントを見ていたところ、 select オプションがありました。 This option can be used to transform or select a part of the data returned by the query function. It affects the returned data value, but does not a…

TanStack Queryの Query Key について調べてみた

TanStack Queryの useQuery や invalidateQueries を使うときは Query Key を指定します。 Query Keyとはなにかを公式ドキュメントで見たところ At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an …

Reactにて、useStateやuseEffectを使っていたところをTanStack Queryに置き換えてみた

最近、状態管理ライブラリ TanStack Query を使う機会がありました。 TanStack Query は公式ドキュメントが充実しています。 TanStack Query | React Query, Solid Query, Svelte Query, Vue Query TanStack/query: Powerful asynchronous state management…