React swr
Data fetching hooks
React SWR
En la mayoría de proyectos, a la hora de pedir datos a una REST API o GraphQL usando simplemente fetch, axios o cualquier otra librería, nos basta con hacer la petición justo cuando se monta el componente y listo.
Sin embargo, si empezamos a rascar, nos podemos encontrar muchos casos adicionales:
Quiero que cuando vuelva a navegar a la página me muestre los datos que ya tenía, pero que me pida en paralelo datos nuevos.
Quiero que cuando haga foco en un componente me recargue datos.
Quiero que si he perdido la conexión con el servidor vuelva a recargar datos.
Quiero que se recarguen los datos cada X tiempo.
Quiero una forma fácil de manejar errores cuando una petición falle.
Si empezamos a sumar casos, nuestro código puede acabar hecho un Sphaguetti... Gracias a la librería SWR, podemos utilizar el hook useSWR que nos simplifica el código para cubrir ciertos escenarios avanzados y que no se convierta en un dolor.
Temario
SWR Hook
En este ejemplo, vamos pedir datos de una API pública utilizando el hook useSWR y aprenderemos los diferentes escenarios que podemos cubrir para revalidarlos y obtener la última versión de los mismos.
¿Te apuntas a nuestro máster?
Si te ha gustado este ejemplo y tienes ganas de aprender Front End guiado por un grupo de profesionales ¿Por qué no te apuntas a nuestro Máster Front End Online Lemoncode? Tenemos tanto edición de convocatoria con clases en vivo, como edición continua con mentorización, para que puedas ir a tu ritmo y aprender mucho.