DEV Community

Play Button Pause Button
Vladimir Novick for Hasura

Posted on

Vue and GraphQL with Hasura video course

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

Top comments (14)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Haha lovin' that green screen!! Where are we supposed to be anyway?

Collapse
 
vladimirnovick profile image
Vladimir Novick

What do you mean? It's not a green screen, It's my room on Hasura spaceship 😉

Collapse
 
jess profile image
Jess Lee

Wow - this is awesome.

Collapse
 
shostarsson profile image
Rémi Lavedrine

Woowww. That is a huge work. Just read this article.
But I am sure that this is a very good start to then move to the other videos.
Thanks for sharing that.

Collapse
 
amosbastian profile image
Amos Bastian

I just finished watching all 13 videos, and they were really great! I was wondering something though: at the start of the 1st video you mentioned that you would also cover authentication and permission management, but I don't think you did. Will this be covered in future videos or did you write about this elsewhere?

Collapse
 
vladimirnovick profile image
Vladimir Novick

Thanks :) I am working on second part of the course that will be released in couple of weeks which will have all this and much more

Collapse
 
amosbastian profile image
Amos Bastian

Great stuff, can't wait!

Collapse
 
andy profile image
Andy Zhao (he/him)

13 videos, nice! Thanks for sharing!

Collapse
 
matthew_collison profile image
Matthew Collison

Super insightful, we've read some things about GraphQL but it seems more like something that can be almost mimicked frontend to backend.

Here's a question for you, do you think this is something that could be used to build a realtime business analytics tool? Something that is fed by a main, existing database - into GraphQL where a business user (maybe a director or a manager) can feed data into it?

Just riffing off ideas. Also, nice spaceship. Thought you were on the space station at first 🚀

Collapse
 
vladimirnovick profile image
Vladimir Novick

Yeah this definitely sounds like a really great idea. And it's definitely achievable with Hasura. In fact recently we released a neat tool that can help you with rendering your results in graphs. might be something you wanna check out blog.hasura.io/graphql2chartjs-rea...

Collapse
 
jayfranko2 profile image
Jay Franko

Awesome series Vladimir! Thanks for making it! I got a lot out of it. I can't wait to use it myself.

The last video is cut off suddenly, not sure if is me or not but you may want to check if the video got damaged somehow.

Collapse
 
pwnchaurasia profile image
Pawan Chaurasia

Can you tell me how can I fetch data with ElasticSearch and graphql ?

Collapse
 
acatzk profile image
acatzk

Hi sir how can you make a custom login and registration using hasura and vuejs.

Collapse
 
fayaz profile image
Fayaz Ahmed • Edited

Finally found a good course with graphql + hasura + vue, they're always about react.

The videos wont work anymore. Are they on youtube?