11-28. Obtención de datos desde una API

 

Obtención de Datos desde una API en React Native

En el desarrollo de aplicaciones móviles modernas, es esencial saber consumir APIs REST para obtener y manipular datos remotos. En este post, exploraremos cómo hacerlo en React Native usando tanto Fetch como Axios.

🌐 Configuración Inicial

Primero, creamos un servicio para manejar nuestras llamadas API:

typescript

// src/api/RickAndMortyAPI.ts
export const getAPIInfo = async (): Promise<ApiInfoResponse> => {
  const response = await fetch('https://rickandmortyapi.com/api');
  return response.json();
};

// src/api/RickAndMortyAPI-alt.ts
import axios from 'axios';

export const getCharacters = async (): Promise<CharacterResponse> => {
  const response = await axios.get('https://rickandmortyapi.com/api/character');
  return response.data;
};

📦 Tipado de Respuestas (TypeScript)

Definimos interfaces para las respuestas:

typescript

// src/api/entities/ApiInfoResponse.ts
export interface ApiInfoResponse {
  characters: string;
  locations: string;
  episodes: string;
}

// src/api/entities/CharacterResponse.ts
export interface CharacterResponse {
  info: {
    count: number;
    pages: number;
    next: string | null;
    prev: string | null;
  };
  results: Character[];
}

export interface Character {
  id: number;
  name: string;
  status: string;
  species: string;
  type: string;
  gender: string;
  origin: {
    name: string;
    url: string;
  };
  // ... más propiedades
}

🔄 Consumiendo la API en Componentes

Opción 1: Usando Fetch

typescript

import { useEffect } from 'react';
import { getAPIInfo } from '../api/RickAndMortyAPI';

function ApiScreen() {
  useEffect(() => {
    getAPIInfo()
      .then(data => console.log('API Info:', data))
      .catch(error => console.error('Error:', error));
  }, []);

  return <View>{/* ... */}</View>;
}

Opción 2: Usando Axios (Recomendado)

typescript

import { useEffect, useState } from 'react';
import { getCharacters } from '../api/RickAndMortyAPI-alt';

function CharacterScreen() {
  const [characters, setCharacters] = useState<Character[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await getCharacters();
        setCharacters(response.results);
      } catch (error) {
        console.error('Error fetching characters:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <ActivityIndicator />;

  return (
    <FlatList
      data={characters}
      renderItem={({ item }) => <CharacterCard character={item} />}
      keyExtractor={item => item.id.toString()}
    />
  );
}

🔍 Comparación: Fetch vs Axios

Característica	Fetch	Axios
Instalación	Incluido en RN	npm install axios
Transformación JSON	Manual (response.json())	Automática
Manejo de errores	Solo errores de red	Errores HTTP (404, 500, etc.)
Interceptores	No	Sí
Cancelación	AbortController	CancelToken
Tipado TypeScript	Manual	Soporte nativo

💡 Mejores Prácticas

1. Abstracción de servicios: Mantén toda la lógica API en archivos separados

2. Manejo de errores: Implementa retry y fallback UI

3. Paginación: Para listas largas

typescript

const [page, setPage] = useState(1);

const loadMore = async () => {
  const response = await axios.get(`https://.../character?page=${page + 1}`);
  setCharacters(prev => [...prev, ...response.data.results]);
  setPage(prev => prev + 1);
};

4. Cache: Usa React Query o SWR para evitar llamadas redundantes

5. Variables de entorno: Guarda URLs base en .env

🚀 Ejemplo Completo con React Query

typescript

import { useQuery } from 'react-query';

function CharacterList() {
  const { data, isLoading, error } = useQuery('characters', getCharacters);

  if (isLoading) return <ActivityIndicator />;
  if (error) return <Text>Error al cargar</Text>;

  return (
    <FlatList
      data={data?.results}
      renderItem={({ item }) => <CharacterItem character={item} />}
    />
  );
}

📌 Conclusión

• Para proyectos simples: Fetch puede ser suficiente

• Para aplicaciones complejas: Axios ofrece mejores características

• Siempre usa TypeScript para tipar tus respuestas

• Considera librerías como React Query para manejo avanzado de datos

¿Qué estrategia usas para manejar APIs en tus proyectos? ¡Compártelo en los comentarios!