TanStack Query v5 Cache Strategy – AI-Generated React Demo
CODE PREVIEW
Prompt
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 を実現するための実践的なテクニックです。
Prompt Overview
This demo showcases advanced cache control in TanStack Query v5. It combines staleTime and gcTime settings with manual invalidation (invalidateQueries) to control data freshness and garbage collection. The list of posts fetched from JSONPlaceholder is cached; the Refresh button re-fetches the data, while the Mark as Stale button forces the data into a stale state without re-fetching. The cache status indicator (fresh / stale) at the top of the screen, along with a countdown display until garbage collection, makes the cache lifecycle immediately visible. This is a practical technique for reducing unnecessary network requests and achieving blazing-fast UX.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選