Crea una
Pokédex con
React y
TanStack Query
Jose Castellano
TanStack Query es una biblioteca
de gestión de estado asíncrono
que gestiona tus peticiones y todo
lo que hay detrás de ellas, con un
rendimiento increíble y una
experiencia de usuario
espectacular.
Jose Castellano Comparte
Además es compatible con
JavaScript y TypeScript y está
disponible para los siguientes
frameworks:
Jose Castellano Comparte
Ahora que ya sabes lo que hace
TanStack Query, vas a crear una
Pokédex con esta librería.
Jose Castellano Comparte
Instalación
Antes de nada tienes que instalar la
librería. Puedes usar el instalador de
paquetes que quieras. Yo uso pnpm.
Jose Castellano Comparte
Configuración del cliente
Lo siguiente que tienes que hacer es
configurar el cliente de TanStack
Query.
Jose Castellano Comparte
Creación de Pokedex
Ahora debes crear el componente
Pokédex, que has importado en el
componente App.
Jose Castellano Comparte
Obtención de los datos
Este es el paso más importante, la obtención de
los datos. Para ello tienes que usar useQuery.
Jose Castellano Comparte
useQuery
Este hook devuelve varios datos.
data: contiene los datos que ha
devuelto la función de la petición
isLoading: true si está cargando la
petición y false si ya se ha resuelto
error: devuelve si ha habido algún
error realizando la petición
Jose Castellano Comparte
Resultado
Este es el resultado que consigues
realizando todos estos pasos.
Jose Castellano Comparte
Te regalo un bonus
Te voy a enseñar cómo realizar
paginación y poder obtener todos los
Pokémon que haya disponibles, en
diferentes páginas.
Jose Castellano Comparte
Pero antes...
Puede que quieras unirte a
las +100 personas que
reciben contenido
exclusivo
Entre otras cosas, de estos trucos...
En mi Newsletter
[Link]/newsletter
Te dejo el enlace en los comentarios.
Jose Castellano Comparte
Paginación
Jose Castellano Comparte
Paginación
Añadiendo el parámetro page a la
función, que es un estado que va
cambiando, obtenemos el siguiente
resultado:
Jose Castellano Comparte
La caché
Una de las mejores cosas que tienen
TanStack Query es la caché.
Si pruebas esto y comienzas a navegar
entre páginas, te darás cuenta de que
una vez que hayan cargado los datos, y
vuelvas a esa página, no tendrá que
volver a cargarlos.
Es una de las cosas que hace tan
especial a TanStack Query.
Jose Castellano Comparte
Déjame en los comentarios
otras librerías que te
gustaría que comentara.
Jose Castellano Comparte
Jose Castellano