Implementar llamadas asíncronas para API Rest con Axios y además optimizarlas con React Query

Tiempo de lectura: 2 minutos

En este artículo de hoy, vamos a ver una forma de implementar Axios (viene a sustituir los fetch o ajax de Javascript en React). Además, optimizaremos las llamadas con React Query, manteniendo en caché aquellas que se realicen en determinadas ocasiones, para evitar realizar un número elevado de llamadas al servidor.

Primero voy a explicar lo que es cada tecnología mencionada:

React Query es una biblioteca de gestión de estado para React, diseñada para manejar la lógica de recuperación y manipulación de datos en aplicaciones. Facilita la gestión de la caché, la invalidación y la reactividad en las solicitudes de datos.

Axios, por otro lado, es una biblioteca de JavaScript utilizada para realizar solicitudes HTTP desde el navegador o Node.js. Proporciona una interfaz fácil de usar para trabajar con API.

Para crear un ServiceContext con Axios y optimizarlo con React Query, puedes seguir estos pasos generales:

1. Instalar React Query y Axios: Asegúrate de tener instalados ambos paquetes:

   npm install react-query axios

2. Crear un archivo para tu servicio con Axios: Crea un archivo, por ejemplo, api.js, donde configurarás Axios y definirás las funciones para realizar tus solicitudes:

   // api.js

   import axios from 'axios';

   const api = axios.create({
     baseURL: 'https://tu-api.com', // Reemplaza con la URL de tu API
   });

   export const getUsuarios= async () => {
     const response = await api.get('/usuarios');
     return response.data;
   };

   // Puedes agregar más funciones según tus necesidades

3. Configurar React Query: Configura React Query en tu aplicación. Puedes hacerlo en tu archivo principal, por ejemplo, index.js:

   // index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { QueryClient, QueryClientProvider } from 'react-query';
   import App from './App';

   const queryClient = new QueryClient();

   ReactDOM.render(
     <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>,
     document.getElementById('root')
   );

4. Crear el contexto y proveedor para tu servicio: En tu ServiceContext.js, puedes crear el contexto y el proveedor para tu servicio:

   // ServiceContext.js

   import React, { createContext, useContext } from 'react';
   import { useQuery } from 'react-query';
   import * as api from './api'; // Importa las funciones de tu servicio

   const ServiceContext = createContext();

   const ServiceProvider = ({ children }) => {
     return (
       <ServiceContext.Provider
         value={{
           getUsuarios: useQuery('usuarios', api.getUsuarios),
           // Agrega más funciones según tus necesidades
         }}
       >
         {children}
       </ServiceContext.Provider>
     );
   };

   const useService = () => {
     const context = useContext(ServiceContext);
     if (!context) {
       throw new Error('useService debe ser utilizado dentro de ServiceProvider');
     }
     return context;
   };

   export { ServiceProvider, useService };

En este ejemplo, estoy utilizando useQuery para gestionar automáticamente la caché y el estado de la solicitud de usuarios.

5. Utilizar el contexto en tus componentes: Ahora, puedes utilizar useService en tus componentes para acceder a las funciones de tu servicio:

   // TuComponente.js

   import React from 'react';
   import { useService } from './ServiceContext';

   const TuComponente = () => {
     const { getUsuarios} = useService();

     if (getUsuarios.isLoading) {
       return <p>Cargando...</p>;
     }

     if (getUsuarios.isError) {
       return <p>Error: {getUsuarios.error.message}</p>;
     }

     return (
       <div>
         <h1>Usuarios</h1>
         <ul>
           {getUsuarios.data.map((usuario) => (
             <li key={usuario.id}>{usuario.nombre}</li>
           ))}
         </ul>
       </div>
     );
   };

   export default TuComponente;

Este es un ejemplo básico, y puedes ajustarlo según tus necesidades específicas. React Query se encargará automáticamente de la gestión de la caché y el estado de tus consultas, proporcionando una forma optimizada y declarativa de manejar la lógica de datos en tu aplicación.