Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Create your GraphQL API auto-generated with Hasura

    Vladimir NovickVladimir Novick
    graphqlGraphQL

    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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss