TanStack Query v5: demo de caché generado con IA y prompt
VISTA DE CÓDIGO
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 のパネルはフレッシュな状態を保ちます。ボタンを使って特定のクエリだけを無効化したり、すべての投稿を無効化したり、キャッシュ全体をクリアしたりできます。ログパネルにはキャッシュ更新イベントがリアルタイムで表示され、クエリのライフサイクルを理解する助けになります。
Resumen del prompt
En esta demostración interactiva, puedes experimentar cómo funciona la invalidación de caché de TanStack Query v5 en la práctica. Dos paneles obtienen datos de publicaciones con diferentes configuraciones de staleTime. El panel predeterminado (0) vuelve a obtener los datos al montarse, mientras que el panel con staleTime: 30000 mantiene el estado fresco. Usa los botones para invalidar solo consultas específicas, todas las publicaciones o limpiar toda la caché. El panel de registro muestra eventos de actualización de caché en tiempo real, lo que ayuda a comprender el ciclo de vida de las consultas.
¿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選