TanStack Query v5 Cache Invalidation: AI-Generated Demo & Prompt
CODE PREVIEW
Prompt
Build an interactive demonstration of TanStack Query v5 cache invalidation. Use a simple list of posts fetched from a mock API. Show two panels: one fetching normally, another with staleTime and refetchOnMount. Provide buttons to invalidate specific queries, invalidate all, and simulate background refetch. Use React, react-query v5, and a fake API (setTimeout). Highlight cache behavior with color-coded statuses and a small log.
このインタラクティブデモでは、TanStack Query v5 のキャッシュ無効化が実際にどのように動作するかを体験できます。2つのパネルが異なる staleTime 設定で投稿データを取得します。デフォルト (0) のパネルはマウント時に再取得しますが、staleTime: 30000 のパネルはフレッシュな状態を保ちます。ボタンを使って特定のクエリだけを無効化したり、すべての投稿を無効化したり、キャッシュ全体をクリアしたりできます。ログパネルにはキャッシュ更新イベントがリアルタイムで表示され、クエリのライフサイクルを理解する助けになります。
Prompt Overview
In this interactive demo, you can experience how cache invalidation works in TanStack Query v5. Two panels fetch post data with different staleTime settings. The default (0) panel refetches on mount, while the staleTime: 30000 panel stays fresh. Use the buttons to invalidate specific queries, invalidate all posts, or clear the entire cache. The log panel displays cache update events in real time, helping you understand the query lifecycle.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選