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.

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

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

2. Creating auto generated CRUD API with Hasura engine

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

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

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

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

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

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

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

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

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

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

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

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 and @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
Hasura Youtube Channel

Course repository

For questions reach out on Discord