DEV Community

Cover image for Haciendo un fetching de datos y creando un custom hook. 🪝
Franklin Martinez
Franklin Martinez

Posted on • Edited on

Haciendo un fetching de datos y creando un custom hook. 🪝

El propósito de este post es enseñar una manera de como realizar peticiones HTTP de tipo GET mediante el uso de React y un custom hook.

🚨 Nota: Este post requiere que sepas las bases de React (hooks básicos y peticiones con fetch).

Cualquier tipo de Feedback es bienvenido, gracias y espero disfrutes el articulo.🤗

 

Tabla de contenido

📌 Tecnologías a utilizar

📌 Creando el proyecto

📌 Primeros pasos

📌 Haciendo nuestro primer fetch

📌 Mostrando los datos de la API en pantalla

📌 Creando un custom hook

📌 Mejorando el hook useFetch

📌 Agregando más componentes y refactorizando

📍 Header.tsx

📍 Loading.tsx

📍 ErrorMessage.tsx

📍 Card.tsx

📍 LayoutCards.tsx


🚨 Tecnologías a utilizar.

▶️ React JS (version 18)

▶️ Vite JS

▶️ TypeScript

▶️ Rick and Morty API

▶️ CSS vanilla (Los estilos los encuentras en el repositorio al final de este post)
 

〽️ Creando el proyecto.



npm init vite@latest


Enter fullscreen mode Exit fullscreen mode

En este caso le colocaremos de nombre: fetching-data-custom-hook (opcional).

Seleccionaremos React y luego TypeScript.

Luego ejecutamos el siguiente comando para navegar al directorio que se acaba de crear.



cd fetching-data-custom-hook


Enter fullscreen mode Exit fullscreen mode

Luego instalamos las dependencias:



npm install


Enter fullscreen mode Exit fullscreen mode

Después abrimos el proyecto en un editor de código (en mi caso VS code)



code .


Enter fullscreen mode Exit fullscreen mode

 

〽️ Primeros pasos.

Dentro de la carpeta src/App.tsx borramos todo el contenido del archivo y colocamos un componente funcional que muestre un titulo y un subtitulo.



const App = () => {
  return (
            <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode

Mostrando titulo y subtitulo

Antes que nada, crearemos un par de interfaces que nos ayudaran al auto completado de las propiedades que viene en la respuesta JSON que nos proporciona la API.

  • La primera interfaz Response contiene la propiedad results que es un arreglo de Results.
  • La segunda interfaz Result, solo contiene 3 propiedades (aunque hay más, puedes revisar la documentación de la API), seleccione un ID, el nombre y la imagen del personaje.


interface Response {
  results: Result[]
}

interface Result {
  id: number;
  name: string;
  image: string;
}


Enter fullscreen mode Exit fullscreen mode

 

〽️ Haciendo nuestro primer Fetch.

  1. Primero agregamos un estado que sea de tipo Result[] y el valor por defecto sera un arreglo vacío ya que aun no hacemos la llamada a la API. Esto nos servirá para almacenar los datos de la API y poder mostrarlos.


const App = () => {

  const [data, setData] = useState<Result[]>([]);

  return (
        <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode
  1. Para poder realizar un fetch de datos, tenemos que hacerlo en un useEffect, ya que necesitamos ejecutar el fetch cuando nuestro componente se renderice por primera vez.

Como necesitamos que solo se ejecuta una vez, colocamos un arreglo vació (o sea, sin dependencia alguna).



const App = () => {
  const [data, setData] = useState<Result[]>([]);

    useEffect(()=> {

    },[]) // arreglo vació

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
    </div>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode
  1. Dentro del cuerpo de la función del useEffect, se hará la llamada a la API, y como el useEffect no nos permite usar código asíncrono directamente, haremos la llamada mediante promesas por mientras.


const [data, setData] = useState<Result[]>([]);

useEffect(()=> {
   fetch('https://rickandmortyapi.com/api/character/?page=8')
   .then( res => res.json())
   .then( (res: Response) => {})
   .catch(console.log)   
},[])


Enter fullscreen mode Exit fullscreen mode
  1. Una vez resuelta las promesas, obtendremos la data correspondiente a la API, la cual la colocaremos al estado mediante la función setData

Con esto ya podríamos mostrar los datos en pantalla. 😌

🚨 Si algo sale mal con la API, el catch se encargara de atrapar el error y mostrarlo por consola y el valor del estado “data” se queda como arreglo vació (y al final no se mostrara nada mas que el titulo y subtitulo de la app).



const [data, setData] = useState<Result[]>([]);

useEffect(()=> {
   fetch('https://rickandmortyapi.com/api/character/?page=8')
   .then( res => res.json())
   .then( (res: Response) =>  {
      setData(res.results);
   })
   .catch(console.log)   
},[])


Enter fullscreen mode Exit fullscreen mode

 

〽️ Mostrando los datos de la API en pantalla.

Antes de mostrar los datos de la API, debemos hacer una evaluación. 🤔

🔵 Solo si la longitud del valor del estado “data” es mayor a 0, mostramos los datos de la API en pantalla

🔵 Si la longitud de del valor del estado “data” es menor o igual a 0, no se mostrara ningún dato en pantalla, solamente el titulo y subtitulo.



const App = () => {
    const [data, setData] = useState<Result[]>([]);

    useEffect(()=> {
       fetch('https://rickandmortyapi.com/api/character/?page=8')
       .then( res => res.json())
       .then( (res: Response) =>  {
          setData(res.results);
       })
       .catch(console.log)   
    },[])

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && <p>data</p>
      }
    </div>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode

Ahora, una vez confirmado que si tenemos datos en el valor del estado “data”, proseguiremos a mostrar y moldear los datos.

Mediante la función map que se usa en arreglos. Recorremos el arreglo del valor del estado “data” y retornaremos un nuevo componente JSX que en este caso solo sera una imagen y un texto.

🔴 NOTA: la propiedad key dentro del div, es un identificador que usa React en las listas, para renderizar los componentes de forma más eficiente. Es importante colocarla.



const App = () => {
    const [data, setData] = useState<Result[]>([]);

    useEffect(()=> {
       fetch('https://rickandmortyapi.com/api/character/?page=8')
       .then( res => res.json())
       .then( (res: Response) =>  {
          setData(res.results);
       })
       .catch(console.log)   
    },[])

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}> 
            <img src={image} alt={image} /> 
            <p>{name}</p> 
          </div>
        ))
      }
    </div>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode

De esta forma hemos acabado de realizar un fetching de datos y mostrarlos en pantalla correctamente. Pero aun podemos mejorarlo. 😎

Mostrando cards
 

〽️ Creando un custom hook.

Dentro de la carpeta src/hook creamos un archivo llamado useFetch.

Creamos la función y cortamos la lógica del componente App.tsx



const App = () => {

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}> 
            <img src={image} alt={image} /> 
            <p>{name}</p> 
          </div>
        ))
      }
    </div>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode

Pegamos la lógica dentro de esta función, y al final retornamos el valor del estado “data.”



export const useFetch = () => {
  const [data, setData] = useState<Result[]>([]);

  useEffect(()=> {
     fetch('https://rickandmortyapi.com/api/character/?page=8')
     .then( res => res.json())
     .then( (res: Response) =>  {
        setData(res.results);
     })
     .catch(console.log)   
  },[]);

  return {
    data
  }
}


Enter fullscreen mode Exit fullscreen mode

Por ultimo, hacemos la llamada al hook useFetch extrayendo la data.

Y listo, nuestro componente queda aun más limpio y fácil de leer. 🤓



const App = () => {

  const { data } = useFetch();

  return (
    <div>
      <h1 className="title">Fetching data and create custom Hook</h1>
      <span className="subtitle">using Rick and Morty API</span>
      {
        (data.length > 0) && data.map( ({ id, image, name }) => (
          <div key={id}> 
            <img src={image} alt={image} /> 
            <p>{name}</p> 
          </div>
        ))
      }
    </div>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode

Pero espera, aun podemos mejorar este hook. 🤯
 

〽️ Mejorando el hook useFetch.

Ahora lo que haremos sera mejorar el hook, agregando más propiedades.

Al estado existente le agregaremos otras propiedades y este nuevo estado sera del tipo DataState



interface DataState {
    loading: boolean;
    data: Result[];
    error: string | null;
}


Enter fullscreen mode Exit fullscreen mode

🔵 loading, valor booleano, nos permitirá saber cuando se este haciendo la llamada a la API. Por defecto el valor estará en true.

🔵 error, valor string o nulo, nos mostrará un mensaje de error. Por defecto el valor estará en null.

🔵 data, valor de tipo Result[] , nos mostrara la data de la API. Por defecto el valor será un arreglo vació.

🔴 NOTA: se acaba de renombrar las propiedades del estate

🔵 data ➡️ dataState

🔵 setData ➡️ setDataState



export const useFetch = () => {
    const [dataState, setDataState] = useState<DataState>({
      data: [],
      loading: true,
      error: null
  });

  useEffect(()=> {
     fetch('https://rickandmortyapi.com/api/character/?page=8')
     .then( res => res.json())
     .then( (res: Response) =>  {
        setData(res.results);
     })
     .catch(console.log)   
  },[]);

  return {
    data
  }
}


Enter fullscreen mode Exit fullscreen mode

Ahora sacaremos la lógica del useEffect en una función aparte. dicha función tendrá el nombre de handleFetch.

Usaremos useCallback, para memorizar esta función y evitar que se vuelva a crear cuando el estado cambie.

El useCallback también recibe un arreglo de dependencias, en este caso lo dejaremos vació ya que solo queremos que se genere una vez.



const handleFetch = useCallback(
    () => {},
    [],
)


Enter fullscreen mode Exit fullscreen mode

La función que recibe en useCallback, puede ser asíncrona por lo cual podemos usar async/await.

  1. Primero colocamos un try/catch para manejar los errores.
  2. Luego creamos una constante con el valor de la URL para hacer la llamada a la API.
  3. Hacemos la llamada a la API usando fetch y le mandamos la URL (el await nos permitirá esperar una respuesta ya sea correcta o errónea, en caso de error, se iría directo a la función catch).


const handleFetch = useCallback(
      async () => {
          try {
                            const url = 'https://rickandmortyapi.com/api/character/?page=18';
              const response = await fetch(url);
          } catch (error) {}
        },
        [],
    )


Enter fullscreen mode Exit fullscreen mode
  1. Después evaluamos la respuesta, si hay un error entonces activamos el catch y mandamos el error que nos da la API.
  2. En el catch, vamos a settear el estado. Llamamos al setDataState, le pasamos una función para obtener los valores anteriores (prev). Retornamos lo siguiente.
    1. Esparcimos las propiedades anteriores (…prev), que en este caso solo sera el valor de la propiedad data, que terminara siendo un arreglo vació.
    2. loading, lo colocamos en false.
    3. error, casteamos el valor del parámetro error que recibe el catch para poder obtener el mensaje y colocarlo en esta propiedad.


const handleFetch = useCallback(
      async () => {
          try {
                            const url = 'https://rickandmortyapi.com/api/character/?page=18';
              const response = await fetch(url);

              if(!response.ok) throw new Error(response.statusText);

          } catch (error) {

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  error: (error as Error).message
              }));
          }
        },
        [],
    )


Enter fullscreen mode Exit fullscreen mode
  1. Si no hay error por parte de la API, obtenemos la información, y setteamos el estado de una manera similar a como lo hicimos en el catch.
  2. Llamamos al setDataState, le pasamos una función para obtener los valores anteriores (prev). Retornamos lo siguiente.
    1. Esparcimos las propiedades anteriores (…prev), que en este caso solo sera el valor de la propiedad error que terminara siendo un nulo.
    2. loading, lo colocamos en false.
    3. data, sera el valor de la contante dataApi accediendo a su propiedad results.


const handleFetch = useCallback(
      async () => {
          try {
                            const url = 'https://rickandmortyapi.com/api/character/?page=18';
              const response = await fetch(url);

              if(!response.ok) throw new Error(response.statusText);

              const dataApi: Response = await response.json();

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  data: dataApi.results
              }));

          } catch (error) {

              setDataState( prev => ({
                  ...prev,
                  loading: false,
                  error: (error as Error).message
              }));
          }
        },
        [],
    )


Enter fullscreen mode Exit fullscreen mode

Después de crear la función handleFetch, nos regresamos al useEffect al cual le quitamos la lógica y agregamos lo siguiente.

Evaluamos si el valor del estado “dataState” accediendo a la propiedad data, contiene una longitud igual a 0, entonces queremos que se ejecute la función . Esto es para evitar que se llame más de una vez dicha función.



useEffect(() => {
    if (dataState.data.length === 0) handleFetch();
}, []);


Enter fullscreen mode Exit fullscreen mode

Y el hook quedaría de esta manera:

🔴 NOTA: al final del hook, retornamos, mediante el operador spread, el valor del estado “dataState”.

🔴 NOTA: se movieron las interfaces a su carpeta respectiva, dentro de src/interfaces.



import { useState, useEffect, useCallback } from 'react';
import { DataState, Response } from '../interface';

const url = 'https://rickandmortyapi.com/api/character/?page=18';

export const useFetch = () => {

    const [dataState, setDataState] = useState<DataState>({
        data: [],
        loading: true,
        error: null
    });

    const handleFetch = useCallback(
        async () => {
            try {
                const response = await fetch(url);

                if(!response.ok) throw new Error(response.statusText);

                const dataApi: Response = await response.json();

                setDataState( prev => ({
                    ...prev,
                    loading: false,
                    data: dataApi.results
                }));

            } catch (error) {

                setDataState( prev => ({
                    ...prev,
                    loading: false,
                    error: (error as Error).message
                }));
            }
        },
        [],
    )

    useEffect(() => {
        if (dataState.data.length === 0) handleFetch();
    }, []);

    return {
        ...dataState
    }
}


Enter fullscreen mode Exit fullscreen mode

Antes de usar las nuevas propiedades de este hook, haremos una refactorización y crearemos más componentes. 😳
 

〽️ Agregando más componentes y refactorizando.

Lo primero es crear una carpeta components dentro de src.

Dentro de la carpeta componentes creamos los siguientes archivos.
 

🟡 Header.tsx

Dentro de este componente solo estarán el titulo y el subtitulo anteriormente creados. 😉



export const Header = () => {
    return (
        <>
            <h1 className="title">Fetching data and create custom Hook</h1>
            <span className="subtitle">using Rick and Morty API</span>
        </>
    )
}


Enter fullscreen mode Exit fullscreen mode

 

🟡 Loading.tsx

Este componente solo se mostrará si la propiedad loading del hook esta en true. ⏳



export const Loading = () => {
  return (
    <p className='loading'>Loading...</p>
  )
}


Enter fullscreen mode Exit fullscreen mode

Mostrando el loading
 

🟡 ErrorMessage.tsx

Este componente solo se mostrará si la propiedad error del hook contiene un valor string. 🚨



export const ErrorMessage = ({msg}:{msg:string}) => {
  return (
    <div className="error-msg">{msg.toUpperCase()}</div>
  )
}


Enter fullscreen mode Exit fullscreen mode

Mostrando el error
 

🟡 Card.tsx

Muestra los datos de la API, o sea la imagen y su texto. 🖼️



import { Result } from '../interface';

export const Card = ({ image, name }:Result) => {

    return (
        <div className='card'>
            <img src={image} alt={image} width={100} />
            <p>{name}</p>
        </div>
    )
}


Enter fullscreen mode Exit fullscreen mode

 

🟡 LayoutCards.tsx

Este componente sirve como contenedor para hacer el recorrido de la propiedad data y mostrar las cartas con su información. 🔳

🔴 NOTA: usamos memo, encerrando nuestro componente, con el propósito de evitar re-renders, que probablemente no se noten en esta aplicación pero solo es un tip. Dicha función memo, solo se vuelve a renderizar si la propiedad “data” cambia sus valores.



import { memo } from "react"
import { Result } from "../interface"
import { Card } from "./"

interface Props { data: Result[] }

export const LayoutCards = memo(({data}:Props) => {
    return (
        <div className="container-cards">
            {
                (data.length > 0) && data.map( character => (
                    <Card {...character} key={character.id}/>
                ))
            }
        </div>
    )
})


Enter fullscreen mode Exit fullscreen mode

Así quedaría nuestro componente App.tsx

Creamos una función showData, y evaluamos:

  • Si la propiedad loading es true, retornamos el componente <Loading/>
  • Si la propiedad error es true, retornamos el componente <ErrorMessage/> , mandando el error al componente.
  • Si ninguna de las condiciones se cumple, significa que los datos de la API ya están listos y se retornamos el componente <LayoutCards/> y le mandamos la data para que la muestre.

Finalmente, debajo del componente , abrimos paréntesis y hacemos la llamada a la función showData.



import { ErrorMessage, Header, Loading, LayoutCards } from './components'
import { useFetch } from './hook';

const App = () => {

  const { data, loading, error } = useFetch();

  const showData =  () => {
    if (loading) return <Loading/>
    if (error) return <ErrorMessage msg={error}/>
    return <LayoutCards data={data} />
  }

  return (
    <>
      <Header/>
      { showData() }
    </>
  )
}
export default App;


Enter fullscreen mode Exit fullscreen mode

🔴 NOTA: También puedes mover la función showData al hook, y cambiar la extension del archivo del hook a .tsx, esto es porque se esta utilizando JSX al retornar diversos componentes.


Gracias por llegar hasta aquí. 🙌

Te dejo el repositorio para que le eches un vistazo si quieres. ⬇️

GitHub logo Franklin361 / fetching-data-custom-hook

Tutorial on how to fetching data and creating a custom hook

Fetching data and create custom Hook

Tutorial on how to fetching data and creating a custom hook

demo

Link to tutorial post ➡️




Top comments (1)

Collapse
 
flash010603 profile image
Usuario163

Me gusto la parte del custom hook!:)