¿Qué es TanStack Query?

¿Qué es TanStack Query?

TanStack Query (anteriormente React Query) es una librería de gestión de estado del servidor para aplicaciones React que revoluciona la forma en que obtenemos, cacheamos, sincronizamos y actualizamos el estado del servidor.

El Problema que Resuelve

Antes de TanStack Query, gestionar datos del servidor en React era complejo y repetitivo:

// ❌ Enfoque tradicional - Mucho código repetitivo
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users/${userId}`)
      .then(response => {
        if (!response.ok) throw new Error('Failed to fetch');
        return response.json();
      })
      .then(data => {
        setUser(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [userId]);

  if (loading) return <div>Cargando...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!user) return <div>Usuario no encontrado</div>;

  return <div>Hola, {user.name}!</div>;
}

La Solución TanStack Query

Con TanStack Query, el mismo código se simplifica dramáticamente:

// ✅ Con TanStack Query - Simple y poderoso
import { useQuery } from '@tanstack/react-query';

function UserProfile({ userId }) {
  const { data: user, isLoading, error } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetch(`/api/users/${userId}`).then(res => res.json())
  });

  if (isLoading) return <div>Cargando...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>Hola, {user.name}!</div>;
}

Conceptos Clave

1. Query Key (Clave de Query)

Un identificador único para cada query. Funciona como una “dirección” en el cache:

// Queries diferentes tienen keys diferentes
['users'] // Lista de todos los usuarios
['user', 123] // Usuario específico con ID 123
['posts', { status: 'published' }] // Posts con filtros

2. Query Function (Función de Query)

La función que realiza la petición al servidor:

// Función simple
queryFn: () => fetch('/api/users').then(res => res.json())

// Función con parámetros
queryFn: ({ queryKey }) => {
  const [_key, userId] = queryKey;
  return fetch(`/api/users/${userId}`).then(res => res.json());
}

3. Cache Inteligente

TanStack Query mantiene un cache automático y inteligente:

• Deduplicación: Múltiples componentes pueden usar la misma query sin duplicar peticiones
• Background Updates: Actualiza datos automáticamente cuando es necesario
• Stale Time: Controla cuándo los datos se consideran “obsoletos”
• Cache Time: Controla cuánto tiempo mantener datos en cache

4. Estados de Query

Cada query tiene estados bien definidos:

const {
  data,           // Los datos obtenidos
  isLoading,      // Primera carga
  isFetching,     // Cualquier petición en chapter
  isError,        // Si hay error
  error,          // El error específico
  isSuccess,      // Si la petición fue exitosa
  refetch         // Función para recargar manualmente
} = useQuery(/* ... */);

Arquitectura Mental

Piensa en TanStack Query como un administrador de cache inteligente que:

1. Intercepta tus peticiones al servidor
2. Cachea las respuestas automáticamente
3. Sincroniza los datos entre componentes
4. Actualiza los datos cuando es necesario
5. Optimiza las peticiones para mejor rendimiento

Diferencias con Otras Soluciones

Aspecto	useState + useEffect	Redux + RTK Query	TanStack Query
Complejidad	Alta (código repetitivo)	Media (boilerplate)	Baja (declarativo)
Cache	Manual	Configurable	Automático
Background Updates	Manual	Configurable	Automático
Deduplicación	No	Sí	Sí
DevTools	No	Sí	Excelentes
Tamaño	0kb (nativo)	~50kb	~13kb

¿Por qué “del Servidor”?

TanStack Query se especializa en estado del servidor, que es diferente al estado del cliente:

• Estado del Cliente: Local, sincrónico, controlado por la app (formularios, UI, navegación)
• Estado del Servidor: Remoto, asincrónico, compartido globalmente (datos de APIs)

// Estado del cliente - No uses TanStack Query
const [isModalOpen, setIsModalOpen] = useState(false);
const [formData, setFormData] = useState({});

// Estado del servidor - Perfecto para TanStack Query
const { data: users } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers
});

Ecosistema TanStack

TanStack Query es parte de un ecosistema más amplio:

• TanStack Query: Gestión de estado del servidor
• TanStack Router: Enrutamiento type-safe
• TanStack Table: Tablas potentes y flexibles
• TanStack Form: Gestión de formularios

---

Ahora que comprendes qué es TanStack Query, exploremos sus características y ventajas principales.

Próximo paso: Características y Ventajas