JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Tickets

Building a Realtime Collaborative Vue.js App using GraphQL

Submitted by Praveen Durairaj (@praveenweb) on Monday, 20 May 2019

Section: Tutorial Technical level: Intermediate Status: Confirmed

Abstract

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

Slides

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

Comments

  •   Abhishek Balaji (@booleanbalaji) Reviewer 10 months ago

    Hi Praveen,

    Thank you for submitting a proposal. Since this is a tutorial, we’ll need to see the detailed slides and/or mind map or what you’re gonna cover in your presentation. Do add these by 31 May, so we can evaluate it and let you know the next steps.

    •   Praveen Durairaj (@praveenweb) Proposer 10 months ago

      Hi Abhishek,

      I have updated the proposal with detailed slides. Let me know the next steps.

      •   Abhishek Balaji (@booleanbalaji) Reviewer 10 months ago

        Thanks Praveen, moving this to evaluation.

  •   Zainab Bawa (@zainabbawa) Reviewer 8 months ago

    Hello Praveen,

    Confirming this tutorial, but it will be run before and after the conference. I will drop you a note about this.

Login with Twitter or Google to leave a comment