Vue and GraphQL with Hasura (14 Part Series)
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!
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
Vladimir Novick ✈️ @VueconfUSFinished my #FullStack #GraphQL Bootcamp with #React, #Angular, #VueJS and #NodeJS. Talked also about @HasuraHQ @PostgreSQL @apollographql @prisma and #serverless with @awscloud, @Azure or @GCPcloud . Watch all 4 days and 9.5hours of live coding here: bit.ly/2DK7HUL04:23 AM - 15 Feb 2019
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
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
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.
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.
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
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.
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
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.
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.
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.
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
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.
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:
For questions reach out on Discord
Posted on Sep 23 '19 by: