React JS. Hooks y llamadas a las API’s

Cómo realizar llamadas a API’s externas empleando fetch y los hooks de React

Photo by Jez Timms on Unsplash

El hook useFetch

Lo primero que vamos a hacer va a ser crear una función llamada sendRequest que encapsule el uso de la función fetch que nos proporcionan los navegadores para realizar llamadas asíncronas. ¿Por qué hago esto? Para favorecer la mantenibilidad del código y su posterior modificación: si en un futuro quisiéramos usar otra librería (como Axios) sólo tendremos que modificar esta función en vez de realizar un “buscar y reemplazar” en todo el proyecto, algo que siempre trae problemas.

  • Nos debe proporcionar una función para realizar la llamada que queramos hacer de modo que al invocarla el estado anterior se vaya actualizando.
  • Una propiedad data donde se encontrará el resultado de la llamada.
  • Una propiedad error para almacenar un objeto de la clase Error en el caso de que algo haya salido mal.
  • el method para realizar la llamada,
  • y el body de la misma en el caso de que se trate una llamada de tipo POST , PUT , etc.
  • Invoca la función sendRequest con las propiedades del objeto recibido.
  • En el caso de que la llamada se realice de forma correcta, la llamada es marcada como exitosa y se almacena el resultado en el estado (también es devuelto por si el componente prefiere usarlo inmediatamente).
  • Si la llamada falló, el estado es actualizado para indicarlo y se almacena el error en el estado.
  • La función memorizada fetchData para realizar la llamada asíncrona.

Realizar una llamada GET para recuperar una lista de usuarios

En el primer ejemplo usaremos el hook useFetch para recuperar una lista de usuarios de la API que nos proporciona la web Reqres (una de mis favoritas para hacer pruebas).

useEffect(
function () {
fetchUsers({
url: "https://reqres.in/api/users",
method: "GET"
});
},
[fetchUsers]
);

Realizar una llamada POST para crear un usuario

Veamos ahora la forma en que podemos emplear nuestro hook useFetch para realizar una llamada POST contra la API y así crear un nuevousuario:

function handleSubmit(event) {
event.preventDefault();
postUser({
url: "https://reqres.in/api/users",
method: "POST",
body: JSON.stringify({ name, job })
});

}

Paginación

Y sí, nuestro hook useFetch se lleva perfectamente con llamadas paginadas como podéis ver a continuación (la API de Reqres admite un parámetro para especificar la página que queremos recuperar):

¿Dudas con el hook useEffect?

Si tienes dudas sobre el hook useEffect y la forma en que lo estoy usando a lo largo de este capítulo te invito a que veas el siguiente vídeo que grabé explicando todas sus características:

Conclusiones

Creo que el hook useFetch es uno de esos hooks que merece la pena tener a mano si no queremos tirar de librerías más potentes como la ya mencionada React Query. Espero haber ilustrado todas sus ventajas con cada uno de los ejemplos que he mencionado: es versátil, fácil de usar y podemos extenderlo fácilmente si por ejemplo queremos cachear las llamadas (puede ser un buen ejercicio 🤓).

¿Quieres recibir más artículos como este?

Si te ha gustado este artículo te animo a que te suscribas a la newsletter que envío cada domingo con publicaciones similares a esta y más contenido recomendado: 👇👇👇

Entre paseo y paseo con Simba desarrollo en Symfony y React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store