Consumo de APIs con fetch: PokeApi

Clase 5 de 17 • Curso de React Native: Manejo de Listas y Consumo de APIs

Beto Martinez

student•

En este caso, creo que quedaria mejor con una promesa en mi opinion

export default function Pokedex() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    getPokemonsApi()
      .then((res) => console.log("res", res))
      .catch((e) => console.log(e));
  }, []);

  return (
    <View>
      <Text>Pokedex</Text>
    </View>
  );
}

Luis Fernando Pedroza Taborda

student•

Se ve mas simplificado y facil de entender, soy nuevo en esto.

Stiven Jiménez

student•

Yo pensé lo mismo, me pareció un poco enredado.

Adrian Dalí

student•

useEffect es un hook que recibe como parametro una funcion que se ejecutara cada vez que nuestro componente se renderice, ya se por un cambio de estado, por recibir props nuevas o porque es la primera vez que se monta useState podremos añadir un estado interno a nuestros componentes para hacerlos dinámicos e interactivos. nos devuelve un array que tendrá el valor del estado y un método para actualizar el estado.

Luis Fernando Pedroza Taborda

student•

Gran aporte, gracias.

Luis Felipe Del Risco Racero

student•

Yo en mi caso preferí usar axios en vez de fetch.

Luis Alejandro Nieto Ruth

student•

Yo implemente el useRffect de esta manera y tambien me funciono.

  useEffect(() => {
    const loadPokmons = async () => {
      try {
        const response = await getPokemonsApi();
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
    return loadPokmons;
  }, [])

Gonzalo Caminos

student•

Gracias. Me re sirvio.

Wilson Fabian Pérez Sucuzhañay

student•

en lugar de crear constants.js en utils con ese API_HOST no sería mejor crear variables de Entorno?, como se crean dichas variables para diferentes estados, ejemplo: dev, prod, beta ¿?

Octavio Villavicencio Cruz

student•

pero creo que "API_HOST" no es una constante de entorno, aunque en un desarrollo conjunto puedes tener API_HOST_SANBOX y API_HOST_PRODU creo que es mas facil tener esas constantes en un archivo ya que ese patron es muy parecido al que se usa con el desarrollo nativo de Java/C-Object

José Gregorio Estrada Meneses

student•

De todos los cursos de Hooks de Platzi es el que mejor explica useState y useEffect

Luis Eduardo

student•

alchile, no me gustaron mucho los cursos de react de platzi

Roberto Enrique Ajuchan Lopez

student•

Luis Eduardo X2 lo veo demasiado basico la verdad

Eliezer Mas Y Rubi

student•

en el Pokedex.js yo realice la peticion directamente de la siguiente forma


const Pokedex = () => {
    useEffect(() => {
        (async () => {
            try {
                const url = `${API_HOST}/pokemon?limit=20&offset=0`;
                const response = await fetch(url);
                const result = await response.json();
                console.log('yes', result)
            } catch (error) {
                throw error;
                console.log('no', error)
            }
        })()
    }, []);

    return (
        <SafeAreaView>
            <Text>This is my Pokedex</Text>
        </SafeAreaView>
    );
}

export default Pokedex;

Jorge Ivan Meza

student•

Lo malo de estos cursos es que se confunde "enseñar" algo con solo describir lo que se está haciendo.

walter ivan reynoso fernandez

student•

Es verdad, no le entiendo nada de los codigos de Async, Await, useState, useEfecct... por qué NO EXPLICA BIEN, estoy adivinando y tengo que leer la documentación cada 2 minutos del video, si era así me salia mejor aprender solo con documentación y ahorraba dinero, lastima que me sirve mucho alguien que explique y una lastima que este profesor no cumpla bien su funcion

walter ivan reynoso fernandez

student•

Es como si ya esperara que supiera todo y nomas me esta guiando a hacer un proyecto

Miguel Hernández

student•

Yo use react-native-config para tener las variables de entorno en un .env, si les da error sigan los pasos del Manual Link (Android) / (iOS) pero no deberia darlo ya que react-native usa Autolinking y ahorra esa configuración y según estoy viendo los archivos de la dependecia tienen soporte para autolinking

Luis Fernando Pedroza Taborda

student•

Gracias por la aclaracion.

Juan Valentin Perdomo Bonilla

student•

Que puede estar sucediendo cuando no me imprime la respuesta en consola?

jilma Jemimah Cavero de Arango

student•

Tengo el mismo problema, lograste resolver ?

Ivan Camilo Hernandez

student•

Pudiste resolver? Tengo el mismo problema

Kevin Parra Lopez

student•

Yo module bastante esta parte, me gusta tener todo archivo con una sola responsabilidad

Instalamos dotenv

yarn add -D react-native-dotenv

Creamos un archivo .env en la raiz del proyecto

REACT_APP_API_POKEMON=https://pokeapi.co/api/v2/pokemon

Creamos una carpeta Helpers y creamos un archivo llamado DeleteEmptyKeys que se va a encargar de limpiar las keys vacías de un objeto

/* eslint-disable no-param-reassign */

/**
 * Descripcion del helper: Este helper se encarga de eliminar los keys que estén vacíos dentro de un objeto, detecta los nulls o los false.
 *
 * Implementacion: Se importa y se pasa como parametro el objeto.
 *
 * Bugs: 0
 */

// Esta función recibe un objeto y elimina las llaves vacías,
// asignando el valor de la llave a los valores verdaderos.
const DeleteEmptyKeys = (obj) => {
  return Object.keys(obj).forEach((key) => {
    // Recorre cada una de las llaves del objeto
    if (obj[key] === null || obj[key] === "") {
      // Si el valor es falso, nulo o vacío
      delete obj[key]; // Elimina la llave del objeto
    }
    if (obj[key] === true) {
      // Si el valor es verdadero
      // obj[key] = key; // Asigna el valor de la llave al valor del objeto
    }
  });
};

export default DeleteEmptyKeys;

Creamos un archivo constants para tener los types y evitar typos

import { REACT_APP_API_POKEMON } from "@env";

export const API_POKEMON = REACT_APP_API_POKEMON;

Creamos una carpeta llamada services y dentro un archivo llamado api.services.js

import { API_POKEMON } from "../constants/pokemon.types";

// Otros
import DeleteEmptyKeys from "../helpers/DeleteEmptyKeys";

async function callApi(endpoint, options) {
  // Se agregan cabeceras al objeto de opciones pasado como parámetro.
  options.headers = {
    "Content-Type": "application/json",
    Accept: "application/json",
    ...options.headers,
  };

  // Se guarda la URL de la API en una variable.
  const url = endpoint;

  // Se realiza la llamada a la API y se obtiene una respuesta.
  const response = await fetch(url, options);

  // Se convierte la respuesta a formato JSON.
  const data = await response.json();

  if (!response.ok || data.error) {
    throw new Error(data);
  }

  // Se devuelven los datos obtenidos de la API externa.
  return data;
}

const api = {
  pokemons: {
    getAllPokemons(filters) {
      DeleteEmptyKeys(filters);
      const url = new URL(API_POKEMON);
      const params = new URLSearchParams(filters);
      url.search = params.toString();

      return callApi(`${url}?${params.toString()}`, {
        method: "GET",
        redirect: "follow",
      });
    },
  },
};

export default api;

Y usamos eso para hacer la llamada dentro del componente

import { SafeAreaView, Text } from "react-native";
import React, { useEffect, useState } from "react";

// Componentes

// Servicios
import api from "../services/api.services";

const PokedexScreen = () => {
  // Estados
  const [data, setData] = useState({
    loading: false,
    data: {},
    error: null,
  });

  const [filters, setFilters] = useState({
    limit: 1,
    offset: 0,
  });

  // Funciones
  const getData = async () => {
    setData({ loading: false, error: null });

    try {
      const data = await api.pokemons.getAllPokemons(filters);
      console.log(data);
      setData({ loading: false, data });
    } catch (error) {
      console.error(error);
      setData({ loading: false, error });
    }
  };

  // UseEffects
  useEffect(() => {
    if (!Object.keys(data.data).length) getData();
  }, []);

  if (data.loading === true) {
    <SafeAreaView>
      <Text>Cargando...</Text>
    </SafeAreaView>;
  }

  return (
    <SafeAreaView>
      <Text>item</Text>
    </SafeAreaView>
  );
};

export default PokedexScreen;

Luciana Durand

student•

Cuando selecciono el incono de pokedex, en vez de mostrarme por consola los datos de los pokemones, me sale un error: "Network request failed", como puedo solucionar esto?

Josué Ramírez Hernández

student•

Hola, seguramente te sale este error porque estas probando la app desde el emulador de Android estudio, este error sale porque el emulador no esta conectado a internet.

La solución es borrar el emulador que estas usando y crear uno nuevo con el sistema más nuevo, así tu emulador podrá estar conectado a internet y ya no te saldrá el error.

Saludos!

Jose David Nuñez Procchio

student•

Por qué en el useEffect no ejecuto directo la función directo? No es un paso más estar poniendo adentro de una función autoejecutable?

Luis Enrique Rendon Cortez

student•

Hola, les comparto el link del api

Alfonso Andres Zapata Guzman

student•

Para agregar las variables en typescript, sigan estos dos enlaces:

// Guide to: https://stackoverflow.com/questions/75186535/how-to-get-env-variables-in-react-native-with-typescript-and-rn-cli
// and https://levelup.gitconnected.com/using-environment-variables-in-a-react-native-app-f2dd005d2457

~ Que tal Platzinauta, ya conectamos en LinkedIn? ~

¡Que estas esperando! Conectemos en LinkedIn, GitHub, Medium, Redes sociales o unete al mejor servidor de Discord sobre Python y ciencia de datos en español.

Daniel Briceño

student•

Implementado conTypeScript y Axios.

export interface PokemonResponse {
  count: number;
  next: string;
  previous: string;
  results: Result[];
}

export interface Result {
  name: string;
  url: string;
}

import axios, { AxiosResponse } from "axios";

import { PokemonResponse } from "../models/pokemon.ts";

import { API_HOST } from "../utils/constants.ts";

export async function getPokemonsApi(
  limit: string | number | null = 20,
  offset: string | number | null = 20
) {
  try {
    const url = `${API_HOST}/pokemon?limit=${limit}&offset=${offset}`;
    const response: AxiosResponse<PokemonResponse> = await axios(url);
    return response.data;
  } catch (error) {
    throw error;
  }
}

import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import React, { useEffect, useState } from "react";

import { getPokemonsApi } from "../api/pokemon";
import { Result } from "../models/pokemon";

export default function Pokedex() {
  const [pokemons, setPokemons] = useState<Result[]>([]);

  const start = async () => {
    try {
      const result = await getPokemonsApi();
      setPokemons(result.results);
      console.log(result.results);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    start();
  }, []);
  return (
    <SafeAreaView>
      <Text>Pokedex</Text>
    </SafeAreaView>
  );
}

Leibniz Moreno

student•

tuve problemas al cargar la lista porque la url que carga el profe la carga v2 sin / y al momento de la URL poner const url = ${API_HOST}pokemon?limit=20&offset=0; con un / antes del pokemon no cargaba, en resumen tener el / al cargar la url de la api luego de v2 o tenerla antes del pokemon en la const de url

Moises Abel Avila Garcia

student•

exelente explicacion

export default function Pokedex() {
  const [pokemons, setPokemons] = useState([]);

  useEffect(() => {
    getPokemonsApi()
      .then((res) => console.log("res", res))
      .catch((e) => console.log(e));
  }, []);

  return (
    <View>
      <Text>Pokedex</Text>
    </View>
  );
}

  useEffect(() => {
    const loadPokmons = async () => {
      try {
        const response = await getPokemonsApi();
        console.log(response);
      } catch (error) {
        console.error(error);
      }
    }
    return loadPokmons;
  }, [])

const Pokedex = () => {
    useEffect(() => {
        (async () => {
            try {
                const url = `${API_HOST}/pokemon?limit=20&offset=0`;
                const response = await fetch(url);
                const result = await response.json();
                console.log('yes', result)
            } catch (error) {
                throw error;
                console.log('no', error)
            }
        })()
    }, []);

    return (
        <SafeAreaView>
            <Text>This is my Pokedex</Text>
        </SafeAreaView>
    );
}

export default Pokedex;

/* eslint-disable no-param-reassign */

/**
 * Descripcion del helper: Este helper se encarga de eliminar los keys que estén vacíos dentro de un objeto, detecta los nulls o los false.
 *
 * Implementacion: Se importa y se pasa como parametro el objeto.
 *
 * Bugs: 0
 */

// Esta función recibe un objeto y elimina las llaves vacías,
// asignando el valor de la llave a los valores verdaderos.
const DeleteEmptyKeys = (obj) => {
  return Object.keys(obj).forEach((key) => {
    // Recorre cada una de las llaves del objeto
    if (obj[key] === null || obj[key] === "") {
      // Si el valor es falso, nulo o vacío
      delete obj[key]; // Elimina la llave del objeto
    }
    if (obj[key] === true) {
      // Si el valor es verdadero
      // obj[key] = key; // Asigna el valor de la llave al valor del objeto
    }
  });
};

export default DeleteEmptyKeys;

import { API_POKEMON } from "../constants/pokemon.types";

// Otros
import DeleteEmptyKeys from "../helpers/DeleteEmptyKeys";

async function callApi(endpoint, options) {
  // Se agregan cabeceras al objeto de opciones pasado como parámetro.
  options.headers = {
    "Content-Type": "application/json",
    Accept: "application/json",
    ...options.headers,
  };

  // Se guarda la URL de la API en una variable.
  const url = endpoint;

  // Se realiza la llamada a la API y se obtiene una respuesta.
  const response = await fetch(url, options);

  // Se convierte la respuesta a formato JSON.
  const data = await response.json();

  if (!response.ok || data.error) {
    throw new Error(data);
  }

  // Se devuelven los datos obtenidos de la API externa.
  return data;
}

const api = {
  pokemons: {
    getAllPokemons(filters) {
      DeleteEmptyKeys(filters);
      const url = new URL(API_POKEMON);
      const params = new URLSearchParams(filters);
      url.search = params.toString();

      return callApi(`${url}?${params.toString()}`, {
        method: "GET",
        redirect: "follow",
      });
    },
  },
};

export default api;

import { SafeAreaView, Text } from "react-native";
import React, { useEffect, useState } from "react";

// Componentes

// Servicios
import api from "../services/api.services";

const PokedexScreen = () => {
  // Estados
  const [data, setData] = useState({
    loading: false,
    data: {},
    error: null,
  });

  const [filters, setFilters] = useState({
    limit: 1,
    offset: 0,
  });

  // Funciones
  const getData = async () => {
    setData({ loading: false, error: null });

    try {
      const data = await api.pokemons.getAllPokemons(filters);
      console.log(data);
      setData({ loading: false, data });
    } catch (error) {
      console.error(error);
      setData({ loading: false, error });
    }
  };

  // UseEffects
  useEffect(() => {
    if (!Object.keys(data.data).length) getData();
  }, []);

  if (data.loading === true) {
    <SafeAreaView>
      <Text>Cargando...</Text>
    </SafeAreaView>;
  }

  return (
    <SafeAreaView>
      <Text>item</Text>
    </SafeAreaView>
  );
};

export default PokedexScreen;

// Guide to: https://stackoverflow.com/questions/75186535/how-to-get-env-variables-in-react-native-with-typescript-and-rn-cli
// and https://levelup.gitconnected.com/using-environment-variables-in-a-react-native-app-f2dd005d2457

import axios, { AxiosResponse } from "axios";

import { PokemonResponse } from "../models/pokemon.ts";

import { API_HOST } from "../utils/constants.ts";

export async function getPokemonsApi(
  limit: string | number | null = 20,
  offset: string | number | null = 20
) {
  try {
    const url = `${API_HOST}/pokemon?limit=${limit}&offset=${offset}`;
    const response: AxiosResponse<PokemonResponse> = await axios(url);
    return response.data;
  } catch (error) {
    throw error;
  }
}

import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import React, { useEffect, useState } from "react";

import { getPokemonsApi } from "../api/pokemon";
import { Result } from "../models/pokemon";

export default function Pokedex() {
  const [pokemons, setPokemons] = useState<Result[]>([]);

  const start = async () => {
    try {
      const result = await getPokemonsApi();
      setPokemons(result.results);
      console.log(result.results);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    start();
  }, []);
  return (
    <SafeAreaView>
      <Text>Pokedex</Text>
    </SafeAreaView>
  );
}

Consumo de APIs con fetch: PokeApi

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación