TanStack Query v5: estrategia de caché, ejemplo con IA
VISTA DE CÓDIGO
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 を実現するための実践的なテクニックです。
Resumen del prompt
En esta demostración, presentamos el control avanzado de caché de TanStack Query v5. Combinamos la configuración de staleTime y gcTime, junto con la invalidación manual (invalidateQueries), para controlar la frescura de los datos y la recolección de basura. Almacenamos en caché una lista de publicaciones obtenida de JSONPlaceholder, y con el botón Refresh se vuelven a obtener, mientras que con el botón Mark as Stale se fuerzan a un estado obsoleto sin volver a obtenerlos. El indicador de estado de caché (fresh / stale) en la parte superior de la pantalla y la cuenta regresiva hasta la recolección de basura (GC) permiten ver de un vistazo el ciclo de vida de la caché. Se trata de una técnica práctica para reducir solicitudes de red innecesarias y lograr una experiencia de usuario ultrarrápida.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選