SWR para Principiantes
Existen muchas maneras de hacer peticiones a una API, gestores de contenido etc. Para obtener un resultado esperado de acuerdo con la petición realizada. Herramientas que nos permiten hacer estas requests son:
De estos tipos existen herramientas que nos ayudan hacer estas peticiones de una forma mas fácil, sin necesidad de tanta configuración. Hoy no vamos a centrar en un repositorio o Hooks que nos facilita bastante a la hora de hacer peticiones, debido a que nos brinda un gran cantidad funcionalidades, que para los que están comenzando no facilita el desarrollo.
¿Qué es SWR?
Este repositorio es SWR, el cual es un hooks de React para la obtención de datos. De una forma mas clara es un repositorio que nos permite hacer peticiones una API de forma rápida, ligera y reutilizable y que tiene la capacidad de hacer peticiones mediante AXIOS, FECTH y GraphQL.
El nombre “SWR” es derivado de stale-while-revalidate, una estrategia de invalidación de caché HTTP popularizada por HTTP RFC 5861. SWR es una estrategia para devolver primero los datos en caché (obsoletos), luego envíe la solicitud de recuperación (revalidación), y finalmente entrege los datos actualizados.
¿Por qué usar SWR?
Por que nos permite hacer peticiones de una forma rápida, fácil de configurar además de su estrategia de cache que nos brinda que la experiencia de usuario sea mejor debido a que al cliente le muestra datos del cache mientras SWR actualiza o se revalidad la información.
¿Cómo instalar SWR en un proyecto de React o NextJS?
Para instalar SWR en el proyecto podemos usar:
o
Dependiendo de manejador de paquetes que este utilizando. Con esto se pondrá a instalar o agregar SWR en el proyecto para que se pueda usar.
¿Cómo usar SWR?
Dependiendo del Fecther que vayas usar en el proyectos ya sea AXIOS, FECTH y GraphQL, este necesita instalar dependencias a parte de SWR, este caso se va usar GraphQL.
En el caso de GraphQL, para hacer uso de SWR se instala la dependencia graphql-request, esta nos permite hacer peticiones de forma simple y liviana a clientes GraphQL. El cual importa request para hacer las peticiones.
Para usar SWR se importa useSWR de SWR, cuando se realiza la importación se debe crear una constante el cual se saca la información(data) y el error en caso tal de que exista. Estos dos son los mínimos necesarios para que funcione de manera correcta. Dentro de userSWR se coloca el query además se pasa el fecther. Este define el tipo de fecth que usamos además de su ruta, en este caso fue GraphQL.
Cuando se hace la petición este puede retornar un error, es por eso que se realiza una condiciones que si existe un error renderice un componente o muestre un mensaje. Y en el caso de que no exista la data, se hace una condición que significa que esta haciendo la petición, esto nos permite implementar un componente Loading mientras que se hacer la petición.
Si no es los dos caso anteriores, este nos retorna la información de la petición, el cual ya podemos trabajar libremente sobre ella. En este caso para extrae la data se puede crear una constante después de las condicionales sacando Movie de data.
