Vue and GraphQL with Hasura video course
Hi, this is a video course originally posted on dev.to and consist of 13 videos explaining how to build a real time app with Vue and Hasura.
In this course, we will start creating sort of a blog CMS step by step from zero to a working app.
1. What is GraphQL
In this video we will discuss basics of GraphQL and why it’s better than REST. Some time ago I also did a GraphQL bootcamp with more in-depth overview of what GraphQL is, so make sure you check it out:
2. Creating auto generated CRUD API with Hasura engine
Creating CRUD GraphQL API can be cumbersome, so Hasura gets you covered by auto generating GraphQL API for you. check how it’s done in this video where we talk about how you can define shape of your data and will see how Hasura will auto generate queries, mutations and even subscriptions for you.
3. Extending CRUD API with Remote Schemas and Event Triggers
Now when CRUD API is working, in the following s video we will see what Hasura gives you for adding business logic to your CRUD API. It can be done in two different ways: Remote Schemas and Event triggers. Adding remote schema meaning Hasura can stitch any external GraphQL schema, provided with GraphQL endpoint. The other method is to use Hasura eventing system to add serverless functions triggered on database events.
4. Securing Hasura GraphQL endpoint with Admin Secret
Security is important and even though the method we will discuss is for development purposes only and Authentication and permission will be covered in different section of the course, securing Hasura console and endpoint is important. We will cover that in the following video.
5. Running Hasura engine locally on existing database
When we already know how to run Hasura engine on Heroku, in the following video we will create a new engine instance in local docker container, but will use Postgres database hosted on Heroku to showcase how Hasura can auto-generate API from existing database. 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
Setting Vue app using GraphQL can be done by various ways. In the following video we will start creating our Vue app by using Vue CLI and then set it up with Apollo Client. In this step you will also see how we can execute basic queries
7. Different gotchas when executing GraphQL queries
Queries can be executed in various ways from Vue app by using vue-apollo. In the following video we will go through different ways to query for data
8. Use ApolloQuery component inside your template
Sometimes querying from your template is really convenient. vue-apollo provides you with ApolloQuery helper component which we will use in the following video lesson. Also we will discuss how to move our queries to .gql files
9. Different ways of using GraphQL mutations in our Vue app for inserting posts
In this lesson we will create AddPost form to insert our data through GraphQL mutations.
10. Delete posts conditionally using delete_posts mutation
We’ve already seen that auto-generated GraphQL API has specific input types, when we used insert_posts mutation. In the following video we will learn how to use delete_posts mutation with conditions that we will provide by using where input type
11. Configure real time updates in your Vue app with Subscriptions
Subscriptions are a crucial part of adding real time functionality to your app. In this lesson we will add subscriptions auto-generated by Hasura and will see our app update in real time
12. Using subscribeToMore when defining a query to get partial updates
Sometimes when subscribing, we need to do only partial updates or update our GraphQL queries based on subscriptions. That’s what subscribeToMore component is about. And we will see in this lesson how it can be done.
13. Move subscribeToMore to be more declarative by moving it to the template
Remember ApolloQuery component that we can use from the template? In this lesson we will see how we can use ApolloSubscribeToMore component for updating your queries based on subscriptions.
Conclusion
I hope this course will give you a good introduction to how you can get started with Vue and Hasura. If you liked this course make sure to follow me here, cause there are more to talk about regarding Vue and Hasura and I will release more content soon. Find me on twitter here: @VladimirNovick and make sure to follow official Hasura twitter account: @HasuraHQ cause I plan to release an advanced part of the course soon that will 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:
For questions reach me on Discord my handle there is vladnovick
