Frontend y Diseño

TanStack Query Data Fetching

Gestiona el estado del servidor con TanStack Query, manejando caché, actualizaciones en segundo plano, datos obsoletos y paginación automáticamente.

Claude Code Cursor Copilot Windsurf Gemini CLI

Descripción General

TanStack Query (anteriormente React Query) es el estándar para la gestión de estado del servidor en aplicaciones React. Los agentes de IA pueden configurar query clients, escribir hooks de query y mutation, implementar actualizaciones optimistas, configurar estrategias de caché y manejar patrones de paginación y scroll infinito.

La biblioteca distingue entre estado del servidor (datos de APIs) y estado del cliente (estado de UI), resolviendo el problema común de mezclar ambos. Tu agente de IA puede implementar `useQuery` para obtención de datos con refetching automático, `useMutation` para operaciones de crear/actualizar/eliminar con invalidación de caché, y `useInfiniteQuery` para listas paginadas.

TanStack Query ahora soporta React, Vue, Solid, Svelte y Angular. Los agentes de IA pueden configurar valores predeterminados de query, implementar estrategias de reintento, configurar prefetching de queries para navegación más rápida y construir aplicaciones offline-first con persistencia de queries.

¿Para Quién Es?

Desarrolladores frontend gestionando datos de API con caché automático
Equipos implementando actualizaciones optimistas para UIs responsivas
Desarrolladores construyendo scroll infinito y listas paginadas
Ingenieros construyendo aplicaciones con capacidad offline mediante persistencia de queries

Instalación

Configurar Claude Code

npm install @tanstack/react-query
# Optional: npm install @tanstack/react-query-devtools

Configuración

// App.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 5 * 60 * 1000, retry: 2 },
  },
});

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

Visitar Fuente (Sitio Oficial)

Explora herramientas de IA

Las mejores herramientas de IA que complementan tus habilidades

Lee artículos sobre IA y diseño

Consejos y tendencias en el mundo del diseño y la IA

Skills Relacionados

Frontend y Diseño

Figma MCP Server

Convierte diseños de Figma a código directamente preservando estilos y componentes del sistema de diseño.

Claude Code Cursor

Frontend y Diseño

Storybook Component Docs

Genera documentación interactiva de componentes de UI con ejemplos en vivo y casos de uso.

Claude Code Copilot Cursor

Frontend y Diseño

Tailwind CSS IntelliSense

Autocompletado inteligente de clases de Tailwind con vista previa de colores y valores mientras escribes.

Copilot Cursor Windsurf