¿Qué función cumple principalmente `queryKey` en TanStack Query?

`queryKey` es la identidad de la consulta y permite gestionar cache, refetch e invalidación.

React

TanStack Query: server state moderno en React

Aprende por qué TanStack Query simplifica fetching, cache e invalidación frente al patrón manual con useEffect.

¿Cuánto sabes de React?

📘 Teoría

Por qué usar TanStack Query

No reemplaza React; complementa React para manejar datos remotos con criterio de producto.

Separa claramente estado de servidor (cacheable, asincrónico) del estado local de UI.

Evita re-fetches innecesarios gracias a cache inteligente por `queryKey`.

Incluye reintentos, stale-time y utilidades de invalidación muy útiles en escenarios reales.

Menos boilerplate manual.
Cache automática por clave.
Estados de petición listos (`isLoading`, `isError`, `data`).
Sincronización más robusta tras cambios.

Setup mínimo con QueryClientProvider

Toda la app debe estar envuelta por el provider para habilitar cache compartida.

Inicialización base

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function Root() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

Primer useQuery en producción

Declara `queryKey` y `queryFn` para describir cómo obtener un recurso.

La `queryKey` identifica el recurso en cache: usa claves estables y expresivas.

`queryFn` debe devolver promesa y lanzar error cuando la respuesta no sea válida.

Desde ahí, la UI se limita a responder a estados del hook en lugar de gestionar todo manualmente.

1 Por qué usar TanStack Query 2 Setup mínimo con QueryClientProvider 3 Primer useQuery en producción

🧪 Aprende probando

Ejemplo Ejemplo: listado de usuarios con useQuery Carga de usuarios con cache y estados de red gestionados por TanStack Query.

⌄

🏁 Retos

Reto Reto: define queryKey estable Completa la consulta añadiendo una `queryKey` para el recurso de posts.

⌄

🧰 Recursos

Enlaces útiles

TanStack Query Docs Queries Guide Query Invalidation

Test

Comprueba tus conocimientos con un test sobre React.

Test de React

Recursos del curso 25

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards

‹

Lección 13

Consumo de APIs con Fetch: loading, error y éxito

Lección 15

React Router desde cero: rutas base en una SPA

›