Building Vue.js Applications with GraphQL

Guía de Packt, organizada en recetas, en la que Heitor Ramon Ribeiro enseña a construir desde cero una aplicación de chat full-stack en tiempo real con Vue.js, GraphQL y AWS Amplify. Es de la etapa de Vue 2: trabaja con Vue CLI 4.x, Quasar CLI 1.x, Amplify 3.x y Node.js 12 o superior. Está dirigida a desarrolladores Vue de nivel intermedio que quieren dar el salto al desarrollo full-stack y que ya conocen Vue.js y JavaScript.

Los dos primeros capítulos repasan los fundamentos de Vue: enlace de datos (data binding), eventos, propiedades computadas, componentes, mixins y componentes funcionales. A partir de ahí entra en el backend como servicio: preparar el entorno de AWS Amplify, escribir el primer esquema GraphQL, añadir el cliente GraphQL de AWS AppSync y crear mutations y queries para leer y escribir datos. En el frontend se usa Quasar Framework para construir componentes y layouts propios, Vue Router para las páginas y Vuex, organizado en módulos, para manejar el estado de los usuarios, los chats y los mensajes. El último capítulo convierte la aplicación en una PWA y la publica en la web.

Lo que se construye es una sola aplicación de mensajería que crece capítulo a capítulo, con usuarios, conversaciones y mensajes conectados a una API GraphQL gestionada por AppSync. Su valor está en mostrar de forma muy guiada cómo se monta un backend GraphQL sin servidor propio y cómo se conecta con una interfaz Vue completa. Hay que tener en cuenta dos cosas. Primero, el contenido está atado a Vue 2, Vuex y Quasar 1, que hoy se reemplazan por Vue 3, Pinia y Quasar 2, así que muchos fragmentos de código habrá que adaptarlos. Segundo, depende mucho del ecosistema de AWS, de modo que no enseña a montar un servidor GraphQL propio (por ejemplo, con Apollo Server). Se necesita una cuenta de AWS para seguir los capítulos.