Caché, datos viejos e invalidación

La magia de TanStack Query está en cómo maneja el paso del tiempo: te muestra datos cacheados AL INSTANTE (nada de "Cargando…" si ya los tiene) y en paralelo revalida en silencio si están "viejos". Entender su modelo de frescura —staleTime, cuándo revalida solo, y cómo lo fuerzas tú con invalidateQueries— es lo que separa usar la librería de dominarla. Hoy abres la caché.

Fresco, viejo, pero nunca en blanco

staleTime: cuándo un dato está viejo

Cuándo revalida solo

Invalidar: forzar la recarga

Cuando TÚ sabes que los datos cambiaron —agregaste un gasto, editaste algo—, marcas la query como vieja con invalidateQueries, y TanStack la revalida:

import { useQueryClient } from "@tanstack/react-query";

function Boton() {
const queryClient = useQueryClient();

async function agregarGasto() {
  await fetch("/api/gastos", { method: "POST", body: JSON.stringify(nuevo) });
  // marca ["gastos"] como vieja → TanStack la recarga sola.
  // Todo componente que use esa query se actualiza; una sola fuente de verdad.
  queryClient.invalidateQueries({ queryKey: ["gastos"] });
}

return <button onClick={agregarGasto}>Agregar</button>;
}

invalidateQueries({ queryKey: ["gastos"] }) marca esa entrada (y las que empiecen por ["gastos"]) como vieja y dispara su recarga. La belleza: no importa cuántos componentes muestren esa lista —TODOS se actualizan solos porque comparten la caché—. Esto resuelve el quinto problema del módulo anterior (sincronizar tras escribir) sin coordinar estados a mano. Escribes al servidor, invalidas, y la UI se pone al día en todas partes.

Mini-reto

Razona la configuración (en papel): tienes tres queries. 1) La lista de países (casi nunca cambia): ¿qué staleTime le pones y por qué? 2) El saldo de una cuenta bancaria (crítico que esté al día): ¿staleTime alto o bajo? 3) Tras un POST /api/gastos exitoso, ¿qué queryKey invalidas para que la lista y el total se refresquen? Explica cómo se enteran otros componentes que muestran esa misma lista.

Qué sigue

Ya lees y refrescas datos. Falta la otra mitad: ESCRIBIR (crear, editar, borrar). TanStack tiene un hook dedicado, useMutation, que además se integra con la invalidación y con las actualizaciones optimistas que viste en el módulo 4. La próxima lección cierra el ciclo completo de datos: leer y escribir.