TanStack Query v5 缓存策略 AI 生成示例【React+Vite】
代码预览
提示词
Create a demo of TanStack Query v5 cache management with staleTime, gcTime, and manual invalidation. Use React + Vite, show a list of posts fetched from JSONPlaceholder, with a 'Refresh' button and a 'Mark as Stale' button. Display cache status (fresh/stale) and GC countdown visually.
このデモでは、TanStack Query v5 の高度なキャッシュ制御を紹介します。staleTime と gcTime の設定、および手動無効化（invalidateQueries）を組み合わせ、データの鮮度とガベージコレクションをコントロールします。JSONPlaceholder から取得した投稿一覧をキャッシュし、Refresh ボタンで再取得、Mark as Stale ボタンで再取得せずに強制的に古い状態にします。画面上部のキャッシュ状態インジケーター（fresh / stale）と、GC までのカウントダウン表示により、キャッシュのライフサイクルが一目でわかります。不要なネットワークリクエストを減らし、爆速 UX を実現するための実践的なテクニックです。
提示词解读
本演示将介绍 TanStack Query v5 的高级缓存控制功能。通过组合配置 staleTime 和 gcTime，以及手动失效（invalidateQueries），实现对数据新鲜度和垃圾回收的控制。从 JSONPlaceholder 获取的帖子列表会被缓存，Refresh 按钮用于重新获取数据，Mark as Stale 按钮则在不重新获取的情况下强制将数据标记为过期。页面顶部的缓存状态指示器（fresh / stale）以及垃圾回收倒计时显示，让缓存的整个生命周期一目了然。这是减少不必要的网络请求、实现极速用户体验的实用技巧。
这个提示对您有帮助吗？
评论
评论将在审核后显示
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選