Reto: construye tu propio useQuery

Reto45 min100 XP

Entendiste TanStack Query desde afuera; hoy lo entiendes desde ADENTRO construyendo tu propio useQuery en miniatura —un custom hook con caché compartida, estados y refetch que CORRE en vivo—. Es el mismo enfoque "desde cero" con el que en JavaScript hiciste tu propio expect, tu propio pub-sub y tu propio pipe. Cuando termines, la magia de TanStack no será magia: será un Map de caché y unos estados bien orquestados que ya sabrás reconstruir.

Reto

Tu propio useQuery

Difícil45 min100 XP(×2 sin mirar la solución)

Qué debes construir

Un hook useQuery casero que reproduzca lo esencial de TanStack Query:

useQuery(key, queryFn): recibe una clave (string) y una función async, y devuelve { data, cargando, error, refetch }.
Caché compartida por clave: un Map module-level (fuera de React). Dos componentes que usen la misma clave comparten el dato cacheado —el segundo NO vuelve a "Cargando…" si ya está—.
Estados correctos: cargando mientras la queryFn corre, error si lanza, data al resolver.
refetch: una función que vuelve a ejecutar la queryFn y actualiza la caché.
Demo: dos componentes que usan la MISMA clave; el segundo aparece con datos al instante desde la caché.

Reglas

La caché vive FUERA del componente (un Map a nivel de módulo), como el store del SC-02.
Maneja la race condition: si el componente se desmonta antes de resolver, no actualices su estado.
Todo tipado con TypeScript y genérico (<T>).

45:00

Cuando estés listo, arranca el reloj.

Lo que este reto te enseña sobre TanStack Query:

La caché es un Map fuera de React. Eso es lo que hace que los datos SOBREVIVAN al desmontaje de un componente y se compartan entre todos. No es magia: es estado global vivo fuera del árbol, justo como el store observable del SC-02.
"Cargando" desaparece con caché. Si el dato ya está, arrancas en cargando: false y lo muestras al instante. Eso es el "nunca pantalla en blanco" de TanStack, reducido a su esencia.
La race condition sigue viva. Incluso con caché, necesitas la bandera ignorar del módulo 3: un hook que carga puede desmontarse antes de resolver.

TanStack Query añade encima de esto: staleTime, revalidación por foco, reintentos, deduplicación real, invalidación, mutaciones… pero el CORAZÓN es lo que acabas de construir.

Autoevaluación: A carga en ~1.2s; luego muestra B —¿aparece al INSTANTE con los datos, sin "Cargando…"? Eso es la caché compartida por clave funcionando. Pulsa "Refetch": borra la caché y recarga. Compara mentalmente con TanStack Query: tu Map es su caché, tu useQuery es useQuery, tu refetch es refetch, y la bandera ignorar es su manejo interno de peticiones obsoletas. Le faltan staleTime, revalidación por foco, reintentos y mutaciones —pero ahora sabes que ninguna de esas cosas es magia—.

Qué sigue

Módulo 5 conquistado: dominas el estado del SERVIDOR —TanStack Query, caché, mutaciones, Suspense, Error Boundaries— y hasta construiste tu propia versión. Pero queda el estado del CLIENTE que muchos componentes comparten: el tema, el usuario logueado, un carrito. Pasarlo por props se vuelve un suplicio (prop drilling). El módulo 6 resuelve el estado global: Context, Zustand, máquinas de estado (XState) y cuándo cada uno.