Start to finish with Hasura’s GraphQL Engine

If you are in the GraphQL community, you have probably already heard, but Hasura recently announced their brand new Postgres-backed API-as-a-Service that makes it dead simple to spin up a persistent GraphQL-powered backend. They have not only made it easy to get started, but also finish, letting you deploy a production ready API immediately to the cloud with Heroku, in one click.

In this article, I’ll give you some tips for getting started with the Hasura GraphQL Engine and demonstrate its potential with a hypothetical CRUD app.

Getting Started

I am going to demonstrate using Heroku to deploy the Hasura GraphQL API, but you can also use Docker as shown here.

Creating an API really only takes a few clicks. Go to this URL,

and enter a new app name (keep track of this since you will use it later), and then click “Deploy”.

Once it has finished, click “View” to open up your newly created API explorer.

Creating your first Hasura CRUD app

The Hasura engine is perfect for CRUD apps. And whenever I think of an example CRUD app, I instantly think of a Kurt Vonnugut’s Slapstick Cousin-Finder app. Kidding aside, building an app that mimics the creative naming system found in that book tests a lot of the capabilities of a CRUD app: creating new entries, listing the current data, and finding their relations with different criteria. So, that is the app we are building today.

If you aren’t familiar with Slapstick (and you don’t have to be), the basic premise is that everyone is given a new middle name comprised of a random naturalistic object, and a number between 1 and 20. If you have the same object as another person, you become pseudo-cousins, and if you have the same object and number, pseudo-siblings. Alright back to coding . . .

To create a Hasura API, you start with creating tables in the web editor. Make sure your tables and fields are camel-case, since they will become the root fields of your API (which is typically how GraphQL schemas are organized). I made my “people” table like this:

Next I created a few sample people using a mutation like this:

And then I am able to find all my pseudo-cousins and siblings using a query like this:

Finding all my relatives, when my fake middle name as “Redwood-2”

Just like that I am already ready to start building a frontend that uses real data. Hasura’s engine makes it super easy to incrementally build your API. As your data and tables grow, so to does your API.

Grabbing Your Data

Once you have your API in working order, you can immediately start getting your data using fetch or curl, like this:  

$ curl ''  \ --data-binary '{"query":"{people {id, name} }"}'

You can also connect it directly to a GraphQL client in only a few lines of code. Here is an example of how I set up my example app using Apollo Client:

Replace `hasura-postgres-graphql-demo` with the app name you used above

Once you have your ApolloProvider configured, all you have to do is add your specific queries to the Apollo Query component, which handles all the data fetching logic for you. Here is a CousinList component example:

Add a <form> and hook it up with Mutation and you will have a persistent, production ready application (ignoring authorization, authentication, caching . . . of course)!

Reactivity as simple as 1 . . .

I found that the most productive feature of Hasura’s engine when I was getting started was that GraphQL subscriptions work out-of-the-box, with an identical API to queries. All you have to do is prefix the query above with subscription instead and you get a reactive query that will update whenever your data changes, even if the changes don’t come from a mutation. Take a look what I mean:

Here I am adding a row using Hasura’s online data editor, but these updates will occur no matter how you update your Postgres data. The next step is to hook it up to a Subscription component, and with almost no work, you have transformed your application into a completely responsive one.

Wrapping Up

I know I am only skimming the surface on a lot of these technologies, but I hope you have seen how expressive GraphQL, and Hasura’s engine, can make your API. They make it dead simple to harness this expressiveness, especially when you combine it with a declarative frontend stack like React plus Apollo. Frontend developers can use these technologies to build a full-stack application without ever having to code a backend, simply clicking a few buttons instead. I am excited to see where developers take this.

About the Author

Michael Fix is a partner at dawn labs, a holistic product studio dedicated to ambitious creation. Michael, and dawn, have built GraphQL products in the past for companies big and small. If you or your company need help building with GraphQL, do not hesitate to reach out at [email protected]

Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.

PS: We’re hiring!