Guías Técnicas

Consumir APIs en React: Guía Completa y Paso a Paso

En React, puedes consumir APIs de varias maneras, dependiendo de las necesidades y la complejidad de tu proyecto. Las principales formas son:

  Consumir de APIs

  • Fetch API (nativo de JavaScript): Una solución integrada en el navegador para realizar solicitudes HTTP.
  • Axios: Una librería externa muy popular que facilita el trabajo con solicitudes y ofrece funciones avanzadas como interceptores y manejo de respuestas.
  • React Query: Una herramienta avanzada para la gestión del estado de datos, sincronización, y caché, ideal para aplicaciones con múltiples fuentes de datos.
  • Hooks personalizados: Permiten encapsular la lógica de consumo de APIs en funciones reutilizables.

Esta guía incluye ejemplos prácticos para cada método, destacando su implementación, ventajas y consideraciones, para que puedas decidir cuál se adapta mejor a tu proyecto.

1. Método Fetch API Nativo

Implementación Básica

jsx 
import { useState, useEffect } from 'react';

function FetchExample() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await fetch('https://api.vercel.app/blog');
        if (!response.ok) {
          throw new Error('Error en la solicitud');
        }
        const data = await response.json();
        setPosts(data);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };

    fetchPosts();
  }, []);

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

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}
  Ventajas

  • Método nativo de JavaScript
  • No requiere instalación de librerías adicionales
  • Soporte en todos los navegadores modernos

  Desventajas

  • Manejo de errores menos intuitivo
  • Sin soporte nativo para cancelación de solicitudes
  • Configuración manual de headers y opciones

2. Axios - Consumo de API con Gestión Avanzada

Instalación

bash 
npm install axios

Implementación

jsx 
import { useState, useEffect } from 'react';
import axios from 'axios';

function AxiosExample() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const source = axios.CancelToken.source();

    const fetchPosts = async () => {
      try {
        const response = await axios.get('https://api.vercel.app/blog', {
          cancelToken: source.token,
          headers: {
            'Content-Type': 'application/json'
          }
        });
        setPosts(response.data);
        setLoading(false);
      } catch (error) {
        if (axios.isCancel(error)) {
          console.log('Solicitud cancelada');
        } else {
          setError(error.message);
        }
        setLoading(false);
      }
    };

    fetchPosts();

    // Función de limpieza
    return () => {
      source.cancel('Componente desmontado');
    };
  }, []);

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

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}
  Ventajas

  • Interceptores de solicitudes
  • Cancelación de solicitudes
  • Transformación de datos
  • Manejo de errores más robusto

3. React Query - Gestión de Estado de Datos

Instalación

bash 
npm install @tanstack/react-query

Implementación

jsx 
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';

// Configuración del cliente de Query
const queryClient = new QueryClient();

// Función de fetching
const fetchPosts = async () => {
  const response = await fetch('https://api.vercel.app/blog');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

function PostsComponent() {
  const { 
    data: posts, 
    isLoading, 
    isError, 
    error 
  } = useQuery({
    queryKey: ['posts'],
    queryFn: fetchPosts,
    staleTime: 5000, // Caché por 5 segundos
    refetchOnWindowFocus: true
  });

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

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

// Envolver la aplicación con QueryClientProvider
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <PostsComponent />
    </QueryClientProvider>
  );
}
  Ventajas

  • Gestión de caché automática
  • Refresco de datos en segundo plano
  • Manejo de estados de carga y error
  • Optimización de rendimiento

4. Hook Personalizado - Abstracción y Reutilización

jsx 
import { useState, useEffect } from 'react';

function useApiData(url) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error('Error en la solicitud');
        }
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

function PostsComponent() {
  const { 
    data: posts, 
    loading, 
    error 
  } = useApiData('https://api.vercel.app/blog');

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

  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}
  Ventajas

  • Lógica de fetching reutilizable
  • Separación de preocupaciones
  • Fácil mantenimiento
  • Flexibilidad para múltiples endpoints

  Conclusión

Cada método de consumo de API en React tiene sus propias ventajas:

  • Fetch: Simple y nativo
  • Axios: Potente y configurable
  • React Query: Gestión de estado avanzada
  • Custom Hook: Máxima flexibilidad y reutilización