Cuando creas proyectos en React, este no tienen ninguna opinion en como solicitar datos. (puedes usar fetch o axios).
Algo muy comun es usar fecth por ejemplo, en un useEffect y cargarlos en un estado (useState), esto conlleva que manejes tu mismo los errores, el estado de carga de datos y su almacenaje.
function Todos() {
const [data, setData] = useState();
const [status, setStatus] = useState();
const [errorMsg, setErrorMsg] = useState();
useEffect(() => {
async function manageRequest() {
setStatus("loading");
try {
const todosData = await requestTodos();
setData(todosData);
setStatus("success");
} catch (e) {
setStatus("failed");
setErrorMsg(e.msg);
}
}
manageRequest();
}, []);
if (status === "loading") {
return <span>Loading...</span>;
}
if (status === "error") {
return <span>Error: {errorMsg}</span>;
}
return (
<div className="list-wrapper">
{data.map((todo) => (
<Todo todo={todo} />
))}
</div>
);
}
sin embargo establecerlos en una memoria cache, evitar duplicacion de peticiones, saber cuando los datos estan desactualizados, o reflejar cambios lo más rapido posible, puede ser una tarea laborioza en cada aplicación. Asi que por este tenemos React Query.
React Query, es una biblioteca para proyectos de React, que permite sincronizar, guardar en memoria cache y actualizar datos que vienen desde el servidor, ofreciendote hooks y un contexto ya creados para que no tenga que hacerlo tu mismo:
function requestTodos() {
return axios.get("/todos");
}
function Todos() {
const { data, status, error } = useQuery("todos", requestTodos);
if (status === "loading") {
return <span>Loading...</span>;
}
if (status === "error") {
return <span>Error: {error.message}</span>;
}
return (
<div className="list-wrapper">
{data.map((todo) => (
<Todo todo={todo} />
))}
</div>
);
}
Esta porción de código hace lo mismo que el código anteriro solo, que con menos lineas de código gracias a React Query.
Te da la ventaja de que tu código es más limpio, al evitar la dupliación de código, y te permite optimizar consultas de forma instantanea.
La biblioteca no es un reemplazo a fetch o axios, de hecho puedes usarlo con estos, sino ofrece hooks sencillos para solicitar datos (useQuery) para modificar datos (useMutation) y funciones para poder actualizar la memoria cache (QueryCache), y tampoco es un reemplazo a manejadores de estado locales, como useContext con useReducer, MobX, Redux o similares, sino que te permite diferenciar incluso el estado que le pertenece al cliente y el estado que viene desde el servidor asincronamente.
Ademas tambien provee una herramienta de Debugging que te permite debuggear tus peticiones facilmente en desarrollo.
Y aunque su nombre es react query, el proyecto tambien soporta Vue (vue-query), Svelte (svelte-query) y Solidjs(solid-query)
Para conocer más he creado un tutorial en el canal.
