TanStack Query v5 缓存失效示例：AI 生成交互演示与提示词
代码预览
エディタを読み込み中…
P
提示词
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 のパネルはフレッシュな状態を保ちます。ボタンを使って特定のクエリだけを無効化したり、すべての投稿を無効化したり、キャッシュ全体をクリアしたりできます。ログパネルにはキャッシュ更新イベントがリアルタイムで表示され、クエリのライフサイクルを理解する助けになります。
提示词解读
在这个交互式演示中，您可以亲身体验 TanStack Query v5 的缓存失效机制如何实际运作。两个面板分别以不同的 staleTime 设置获取帖子数据。默认 (0) 面板在挂载时会重新获取数据，而 staleTime: 30000 的面板则能保持数据新鲜。您可以使用按钮仅使特定查询失效、使所有帖子失效，或清除整个缓存。日志面板会实时显示缓存更新事件，帮助您理解查询的生命周期。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選