In this video you will see how you can easily set up auto-generated GraphQL API for your app with Hasura free and open source engine

To get started with Hasura go to [hasura.io](hasura.io)

https://app.egghead.io/api/v1/lessons/graphql-create-your-graphql-api-auto-generated-with-hasura/subtitles

Create your GraphQL API auto-generated with Hasura

Instructor: [00:00] To add real-time GraphQL using Hasura, go to hasura.io and click on "Get started with Heroku free tier." You will be brought to the docs, where you can click on "deploy to Heroku" button. When seeing Heroku dashboard, choose your app name.

[00:17] Set it as "Egghead test," choose your region, and you will see Postgres add-on is automatically added. Click on "Deploy app," and after configuring the environment, building it, and running a bunch of scripts, our app will be deployed to Heroku.

[00:38] We can manage our app, and or we can go inside Hasura console and view our app. In Hasura console, we see graphical data and more schemas and event stuff. In graphical tab, you'll be able to see docs, the GraphQL, and currently, we don't have any.

[00:58] We go to data at top, we'll create a new table. We'll call it post, we'll set an ID of unique identifier type, and we'll use genRandomNewID helper function provided by Hasura. The title will be of type text, and the text will be also of type text. Primary key will be ID, and our table is added.

[01:27] Now, we can modify and add a timestamp. We will use now helper function to add a current time step, and we'll use the user ID later on to add our users table. Now, we can query post query, and we can get title, we can get text, and a bunch of other fields from other places.

[02:00] You can see, we have query, mutations, and subscriptions. Queries will also have aggregate queries and bunch of helpers. Let's add another table, call it users with ID of random UID, first name of type text, and last name.

[02:23] Also, add an address, set a primary case and ID, and set addresses allowable field. Add our table. Now, if we query our post, we expect that we'll have a title, text, and also a user. We see we have only user ID.

[02:45] The reason for that is because we haven't added our user ID as a foreign key. Let's go to post, modify, set our user ID as a foreign key to users table. Let's reference an ID column and save it. Hasura advises us to add a relationship, so we can have an object relationship inside our query.

[03:15] Now, in graphical, we'll be able to query our post, and we'll get, in addition to the text title, we will be able to get a user. Now, let's run mutation. We can run the self post mutation and pass a bunch of objects.

[03:31] What we want to do, we want to install both post and the user. For user, we need to provide data field with all mandatory user fields that we need to pass. We can return affected rows and an ID. As you can see, our post is created.

[03:52] We have two affected rows. An ID that we have here is a post ID. If we go to data, post, we will see our post exists. It also has an ID that we've seen in our graphical. We have the user ID, and if we go to the table users, we will see user ID is created.

[04:17] Now, it's time to do subscriptions. For subscriptions, I want to open a different tab. Subscription will be a subscription of posts that was autogenerated for me, with title, text, time stamp, and the user.

[04:44] As you can see, our subscription is executed, and the data that is returned is similar to the data that was returned from the query. Now, what if we add, we go to history and insert the second post? Let's do that.

[05:05] When I will run this mutation, we see our subscription is updated automatically due to the nature of subscriptions. To use Hasura in your app, simply use this endpoint.

Create your GraphQL API auto-generated with Hasura

Share this video with your friends