Building a Realtime Collaborative Vue.js App using GraphQL
This tutorial will be about building a realtime todo app in Vue.js using GraphQL. The audience would be provided a ready-made GraphQL API endpoint and a boilerplate UI in Vue.js to get started. Using this, they will be integrating Apollo Client and all the functionalities of the app using GraphQL queries, mutations and subscriptions.
This tutorial will cover the fundamentals of GraphQL and the tooling required to implement GraphQL in Vue.js apps.
Key concepts and takeaways of this tutorial would be
- Introduction to GraphQL (Queries, Mutations, Subscriptions)
- Setting up GraphQL Client with Vue Apollo
- Integrating GraphQL queries in your Vue app
- Making use of Variables in Mutations
- Learning how to update local cache using Apollo
- Optimistic updates to local state in the Vue app
- Using subscriptions in Vue components
- Realtime feed with notification style UI
- Testing Auth and Permissions
By the end of this tutorial, the audience would have built a realtime todo app in Vue and would have learnt the key concepts and patterns behind building a Vue app with GraphQL.
Laptop, with Node.js 8+ and npm/yarn installed along with access to internet.