TanStack Query v5 キャッシュ無効化プロンプト作例・AI生成デモ
CODE PREVIEW
エディタを読み込み中…
P
プロンプト
TanStack Query v5 のキャッシュ無効化を体験できるインタラクティブデモ。投稿一覧をモックAPIから取得し、staleTimeとrefetchOnMountの違いを2つのパネルで比較。特定クエリの無効化・全無効化・バックグラウンド再取得ボタンを実装。React, react-query v5, 疑似API (setTimeout) を使用し、キャッシュの状態を色分け表示とログで可視化。
このインタラクティブデモでは、TanStack Query v5 のキャッシュ無効化が実際にどのように動作するかを体験できます。2つのパネルが異なる staleTime 設定で投稿データを取得します。デフォルト (0) のパネルはマウント時に再取得しますが、staleTime: 30000 のパネルはフレッシュな状態を保ちます。ボタンを使って特定のクエリだけを無効化したり、すべての投稿を無効化したり、キャッシュ全体をクリアしたりできます。ログパネルにはキャッシュ更新イベントがリアルタイムで表示され、クエリのライフサイクルを理解する助けになります。
このプロンプトは役に立ちましたか？
コメント
コメントは承認後に表示されます
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選