Cuando se trata de hacer una aplicación web muy a menudo se utiliza un API Rest que suministra datos desde el backend. No siempre está disponible el backend en el momento en que se empieza a desarrollar el frontend o incluso a veces es deseable no depender de los vaivenes del desarrollo del backend.
Para aislar al frontend del backend es útil la librería Mock Service Worker. Mediante esta librería podemos simular el backend cómo si ya estuviese disponible aunque no lo esté. Vamos a ver un ejemplo.
Para acceder a los recursos del backend se utilizan métodos HTTP. En este ejemplo vamos a simular un get que devuelve frases famosas. El get se simula con:
Es decir, cuando desde el frontend se ejecuta el fetch que envía el get, si estamos en el entorno de desarrollo se ejecuta un get que devuelve un fichero json con estas 2 citas. Para distinguir el entorno de desarrollo del de producción se usa una variable de entorno de la siguiente manera:
https://thesimpsonsquoteapi.glitch.me/" es la url del backend real, la que se utilizará en producción cuando todo esté funcionando.
Entonces lo que es necesario para que todo esto funciones es instalar la librería Mock Service Worker con npm install msw --save-dev
Y utilizar la función setupWorker con el workersetup.js con el siguiente contenido:
Bueno pongo todo en orden para que se entienda:
Main-page.js es un componente React que determina cual es la URL que se utilizará para el get como hemos visto anteriormente. El objetivo de este componente es mostrar todas las citas que devuelve el blackend. El contenido de Main-page.js es:
En este ejemplo cuando se está realizando la ejecución en el entorno de desarrollo el get se efectúa a /quotes y cuando es otro entorno, en este caso producción el get se efectúa a https://thesimpsonsquoteapi.glitch.me/quotes. Son workerSetup.js y handlers.js los que se encargan de simular la respuesta del get cuando la petición se lanza a /quotes.
Entonces lo que vemos en la pantalla cuando ejecutamos este componente en el entorno de desarrollo es:
Coincidiendo las citas que se muestran en pantalla con las que se crean en el objeto handlers.js cuyo contenido se mostró en la primera imagen de código.
Conclusión
Esta librería nos puede ayudar cuando durante el desarrollo queremos independizar el frontend del backend. Es decir podemos ir avanzando el frontend aunque el backend no esté disponible.
