JSFoo: VueDay 2019

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.

Outline

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.

Requirements

Laptop, with Node.js 8+ and npm/yarn installed along with access to internet.

Speaker bio

I’m Praveen Durairaj, an Application Engineer at Hasura with areas of interest spanning around React, Vue, GraphQL and Docker. Core contributor of hasura/graphql-engine

Links

• https://twitter.com/praveenweb
• https://github.com/praveenweb
• https://www.youtube.com/watch?v=npcrzCujh-U

Slides

https://docs.google.com/presentation/d/1xwKWPSsH07MSNuDkYuJa4jGW3CUXtC66mb0UVwVNuPk/edit?usp=sharing