Vue and GraphQL with Hasura video course
Tags: vue, graphql, hasura
Published: 2019-03-26 13:57:17

---
title: Vue and GraphQL with Hasura video course
published: true
description: In this course, we will create a Vue blog CMS, step-by-step, and we will cover major aspects of executing GraphQL queries, mutations and subscriptions.We will learn how to setup and deploy Hasura for free on Heroku. We will see how Hasura provides a realtime GraphQL API on top of a new (or existing) Postgres database that we will use to build our Vue app.
tags: Vue, GraphQL, Hasura 
series: Vue and GraphQL with Hasura
---

# Vue and GraphQL with Hasura video course

Hello and welcome to the video course series in which we will create Vue apps with GraphQL using the open source Hasura GraphQL engine. 

{% twitter 1110557406080188417 %}

In this course, we will create a Vue blog CMS, step-by-step, and we will cover major aspects of executing GraphQL queries, mutations and subscriptions.

We will learn how to setup and deploy Hasura for free on Heroku. We will see how Hasura provides a realtime GraphQL API on top of a new (or existing) Postgres database that we will use to build our Vue app.

Check out the lessons below and have fun learning!


# [1. What is GraphQL](https://dev.to/hasurahq/what-is-graphql-1akh)
[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__743b8dfa6ec96d7d201228333f6d1322/thumbs-video-upload__743b8dfa6ec96d7d201228333f6d1322-00001.png)](https://dev.to/hasurahq/what-is-graphql-1akh)

In this video we will discuss basics of GraphQL and why it's better than REST. Even though this video will cover the basic concepts of GraphQL, If you wanna learn more about it, I suggest you check my free GraphQL bootcamp that I did recently to get more in-depth overview of what GraphQL is and it's capabilities

{% twitter 1096263629240844288 %}


# [2. Creating auto generated CRUD API with Hasura engine](https://dev.to/hasurahq/auto-generating-crud-graphql-api-using-hasura-47o2)

[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__fa24589e19b7db6b83a3e56b5862395b/thumbs-video-upload__fa24589e19b7db6b83a3e56b5862395b-00001.png)](https://dev.to/hasurahq/auto-generating-crud-graphql-api-using-hasura-47o2)


In this video we will cover how to get started with Hasura engine and how it will auto generate GraphQL API for you. We will define the shape of data we will be using through the course for our blog cms app that we will be building


# [3. Extending CRUD API with Remote Schemas and Event Triggers](https://dev.to/hasurahq/extending-crud-api-with-remote-schemas-and-event-triggers-2dmd)

[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__02781ee9fed078eb18d9ff2a3a4ef663/thumbs-video-upload__02781ee9fed078eb18d9ff2a3a4ef663-00001.png)](https://dev.to/hasurahq/extending-crud-api-with-remote-schemas-and-event-triggers-2dmd)

This video is an introduction of Hasura capabilities of adding business logic to your CRUD API through two different methods: Remote Schemas and Event triggers. Remote schemas will basically give you an ability to stitch GraphQL schema, auto-generated by Hasura to any different GraphQL schema of maybe your own server or external GraphQL API. The other method is to use Hasura eventing system to add serverless functions triggered on database events. Both of these methods will be explained in more detail in future section of the course

# [4. Securing Hasura GraphQL endpoint with Admin Secret](https://dev.to/hasurahq/securing-hasura-graphql-endpoint-with-admin-secret-key-3nf8)

[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__dd3727b071e90e19fef1368b7dbddeb8/thumbs-video-upload__dd3727b071e90e19fef1368b7dbddeb8-00001.png)](https://dev.to/hasurahq/securing-hasura-graphql-endpoint-with-admin-secret-key-3nf8)

Leaving your GraphQL endpoint unsecured is a bad idea, so in this video we will walk through how to secure your GraphQL endpoint with a secret key. 

# [5. Running Hasura engine locally on existing database](https://dev.to/hasurahq/running-hasura-engine-locally-on-existing-database-56p1)

[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__1e5d70f1d4a2d28cd73f32cbcacf53b7/thumbs-video-upload__1e5d70f1d4a2d28cd73f32cbcacf53b7-00001.png)](
https://dev.to/hasurahq/running-hasura-engine-locally-on-existing-database-56p1)

In this video we will move from running Hasura engine in Heroku to running it locally using Docker, while still connected to Postgres database deployed to Heroku. We will see that everything we defined in previous steps is kept intact and will illustrate how the engine can run on top of existing database as well as on a new one. As you can understand from this step, whenever you able to run engine in Docker container, basically you can run it on any environment in any cloud that supports Docker.

# [6. Setting up Vue app with Apollo client and querying data](https://dev.to/hasurahq/setting-up-vue-app-with-apollo-client-and-querying-graphql-endpoint-for-data-2899)
[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__abbb80e4d02d98897e01c3a9fddcb8e3/thumbs-video-upload__abbb80e4d02d98897e01c3a9fddcb8e3-00001.png)](
https://dev.to/hasurahq/setting-up-vue-app-with-apollo-client-and-querying-graphql-endpoint-for-data-2899)

In this video we will start creating our Vue app by using Vue CLI and set it up using Apollo Client. We will connect it to our, already secured, GraphQL endpoint running in docker container locally and execute basic GraphQL queries

# [7. Different gotchas when executing GraphQL queries](https://dev.to/hasurahq/different-gotchas-when-executing-graphql-queries-242)

[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__745041233ae37e8638cb597e6b546ed9/thumbs-video-upload__745041233ae37e8638cb597e6b546ed9-00001.png)](
https://dev.to/hasurahq/different-gotchas-when-executing-graphql-queries-242)

In this video we will go through different ways to query for data and various methods apollo client provides us with, so we can manipulate the data in a way we want.

# [8. Use `ApolloQuery` component inside your template](https://dev.to/hasurahq/use-apolloquery-component-inside-your-template-8gp)
[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__c23ffad9f7828dffa91f0889d28afd2b/thumbs-video-upload__c23ffad9f7828dffa91f0889d28afd2b-00001.png)](
https://dev.to/hasurahq/use-apolloquery-component-inside-your-template-8gp)

Apollo Client comes with ApolloQuery helper component that gives you an option to move all your data querying inside Vue template. In this lesson we will discuss how we can use it. In addition to that we will also use .gql files, so all of our queries, mutations and subscriptions will reside in one place in filesystem which will make them easier to find

# [9. Different ways of using GraphQL mutations in our Vue app for inserting posts](https://dev.to/hasurahq/different-ways-of-using-graphql-mutations-in-our-vue-app-for-inserting-posts-36o1)
[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__dcbbfab411ce72b8bc0e419679b21838/thumbs-video-upload__dcbbfab411ce72b8bc0e419679b21838-00001.png)](
https://dev.to/hasurahq/different-ways-of-using-graphql-mutations-in-our-vue-app-for-inserting-posts-36o1)

Now when we can easily query the data in different ways, it's time to make our app more interactive. In this lesson we will cover how to execute mutations in our Vue app and how to insert a new data by creating AddPost form.

# [10. Delete posts conditionally using `delete_posts` mutation](https://dev.to/hasurahq/delete-posts-conditionally-using-deleteposts-mutation-18m4)

[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__73d98be22ae87c673f63f616e55bce8e/thumbs-video-upload__73d98be22ae87c673f63f616e55bce8e-00001.png)](
https://dev.to/hasurahq/delete-posts-conditionally-using-deleteposts-mutation-18m4)

Hasura auto generates GraphQL API in specific way. for inserting the data we used insert_posts mutation. In this video we will learn how to use delete_posts mutation as well as add conditions to our delete logic using where input type provided by Hasura. 

# [11. Configure real time updates in your Vue app with Subscriptions](https://dev.to/hasurahq/configure-real-time-updates-in-your-vue-app-with-subscriptions-2lnj)
[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__ddc9296838c573a48c6b54be7088da01/thumbs-video-upload__ddc9296838c573a48c6b54be7088da01-00001.png)](
https://dev.to/hasurahq/configure-real-time-updates-in-your-vue-app-with-subscriptions-2lnj)

In this lesson we will finally add real time capabilities to our app by adding GraphQL Subscriptions that were also auto-generated for you by Hasura engine. We will reconfigure our Apollo client from using simple solution as apollo-boost to more complex setup for subscriptions. We will learn how to use $subscribe in our apollo provider and will see how data is updated in real time.


# [12. Using `subscribeToMore` when defining a query to get partial updates](https://dev.to/hasurahq/using-subscribetomore-when-defining-a-query-to-get-partial-updates-1mp0)
[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__2200fd46626601e9bcc7325c7b7214aa/thumbs-video-upload__2200fd46626601e9bcc7325c7b7214aa-00001.png)](
https://dev.to/hasurahq/using-subscribetomore-when-defining-a-query-to-get-partial-updates-1mp0)

In this lesson we will see how we can use subscriptions to get partial data and compliment our defined queries. In that way we won't need to reload the whole dataset, but only the latest added data

# [13. Move `subscribeToMore` to be more declarative by moving it to the template](https://dev.to/hasurahq/move-subscribetomore-to-be-more-declarative-by-moving-it-to-the-template-4bd0)

[![](https://dw71fyauz7yz9.cloudfront.net/video-upload__d011638ff06dfb471b621dda241a92e0/thumbs-video-upload__d011638ff06dfb471b621dda241a92e0-00001.png)](
https://dev.to/hasurahq/move-subscribetomore-to-be-more-declarative-by-moving-it-to-the-template-4bd0)

In this lesson we will see how we can use `ApolloSubscribeToMore` component to move all our query and subscriptions syntax to the template being more declarative.



## Conclusion

As you can see, after finishing this video course you will be confident enough to create your own Vue apps with GraphQL API using Hasura. If you like this content tweet about it on twitter mentioning [@VladimirNovick](https://twitter.com/VladimirNovick) and [@HasuraHQ](https://twitter.com/HasuraHQ) and suggest what you want to hear about in upcoming and more advanced parts of the course. The plan is to include Authentication, Permission management, Vuex, Combining Hasura with your own GraphQL server, Adding business logic using serverless functions.
And make sure you check the following youtube channels for more content:


[Vladimir Novick Youtube channel](https://www.youtube.com/channel/UCxiXx-gMssQnY0hTt5bStpw)
[Hasura Youtube Channel](https://www.youtube.com/channel/UCZo1ciR8pZvdD3Wxp9aSNhQ)

[Course repository](https://github.com/vnovick/vue-course-blog-cms)

For questions reach out on [Discord](https://discord.gg/hasura)