15 - ⚡ React Query y manejo de caché de datos
Aprende cómo usar React Query para optimizar el fetching, almacenamiento y sincronización de datos en tus aplicaciones Next.js. Gestiona el estado de los datos remotos de forma automática y eficiente.
🔍 ¿Qué es React Query?
React Query (ahora parte de @tanstack/query) es una librería que simplifica el manejo de datos asíncronos
provenientes de APIs.
Permite hacer fetching, caching, sincronización y revalidación de datos sin tener que escribir
lógica compleja con useEffect o useState.
Instalación:
npm install @tanstack/react-query
⚙️ Configuración básica en Next.js
En Next.js, debemos envolver nuestra aplicación con el QueryClientProvider
para habilitar la funcionalidad de React Query.
// app/providers.js
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { useState } from "react";
export default function Providers({ children }) {
const [queryClient] = useState(() => new QueryClient());
return (
<QueryClientProvider client={queryClient}>
{children}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
}
Luego lo integramos en layout.js o en el punto de entrada principal:
// app/layout.js
import Providers from "./providers";
export default function RootLayout({ children }) {
return (
<html lang="es">
<body>
<Providers>{children}</Providers>
</body>
</html>
);
}
📡 Fetching de datos con useQuery
El hook useQuery se encarga de realizar la petición, almacenar los datos en caché y mantenerlos actualizados automáticamente.
📦 Ejemplo: Lista de usuarios
// app/react-query/page.js
"use client";
import { useQuery } from "@tanstack/react-query";
async function fetchUsuarios() {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
return res.json();
}
export default function UsuariosPage() {
const { data, isLoading, isError } = useQuery({
queryKey: ["usuarios"],
queryFn: fetchUsuarios,
});
if (isLoading) return <p>Cargando usuarios...</p>;
if (isError) return <p>Error al cargar los datos 😢</p>;
return (
<div className="p-6">
<h1 className="text-2xl font-bold mb-4">📋 Lista de Usuarios</h1>
<ul className="space-y-2">
{data.map((user) => (
<li key={user.id} className="border p-3 rounded shadow-sm">
<strong>{user.name}</strong> — {user.email}
</li>
))}
</ul>
</div>
);
}
🧩 Resultado visual:
📋 Lista de Usuarios
- Leanne Graham — leanne@example.com
- Ervin Howell — ervin@example.com
- Clementine Bauch — clem@example.com
🔄 Revalidación automática y refetch
React Query actualiza los datos automáticamente cuando el usuario vuelve a la página o pasa un tiempo definido.
const { data, refetch } = useQuery({
queryKey: ["usuarios"],
queryFn: fetchUsuarios,
refetchInterval: 30000, // Actualiza cada 30 segundos
});
También puedes refrescar manualmente:
<button onClick={() => refetch()} className="bg-blue-500 text-white px-3 py-1 rounded">
🔄 Actualizar
</button>
✏️ Envío de datos con useMutation
Las mutaciones son acciones que cambian los datos: crear, actualizar o eliminar registros. React Query maneja automáticamente el estado de carga y revalida la caché al terminar la operación.
import { useMutation, useQueryClient } from "@tanstack/react-query";
function CrearUsuario() {
const queryClient = useQueryClient();
const mutation = useMutation({
mutationFn: (nuevoUsuario) =>
fetch("/api/usuarios", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(nuevoUsuario),
}),
onSuccess: () => {
queryClient.invalidateQueries(["usuarios"]); // Refresca la lista
},
});
return (
<button
onClick={() => mutation.mutate({ nombre: "Nuevo usuario" })}
className="bg-green-500 text-white px-3 py-1 rounded"
>
➕ Agregar usuario
</button>
);
}
useMutation puedes enviar datos y mantener la interfaz sincronizada automáticamente.
✅ Resumen
- ⚡ React Query gestiona datos remotos con caché y sincronización automática.
- 📡 Usa
useQuerypara leer yuseMutationpara escribir datos. - 🔁 Permite revalidar, refrescar y compartir datos entre componentes sin estado manual.
- 🧠 Mejora el rendimiento y simplifica la lógica de fetching en tus proyectos Next.js.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias