Add pre-built Chakra UI components to a Gatsby app

Create persisted navigation for a page layout in a Gatsby app

Use Chakra UI style props with React components to make a clean layout design

Generate a visually editable GraphQL API with Hasura, deployed to Heroku

Provision an Auth0 app and add authentication to an app with a custom Gatsby plugin

Connect newly registered users from Auth0 to Hasura and add authorization roles

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0

Hasura's one click deploy can give you a production ready GraphQL API backed by a Postgres database. In this lesson we'll use it to set up initial configurations and database tables needed to support the app's needs. 

We'll make a user table, a playlist table, and an upvote table, which will show how primary and foreign key relationships, unique ids, and more function.

This example uses the Heroku one click deploy as the fastest way to get started.

## Additional resources:

- [Heroku/Hasura one click deploy docs](https://hasura.io/docs/1.0/graphql/manual/deployment/deployment-guides/heroku.html#deploy-heroku)
- [Heroku buildpack for the Hasura GraphQL engine](https://github.com/hasura/graphql-engine-heroku)

https://app.egghead.io/api/v1/lessons/graphql-generate-a-visually-editable-graphql-api-with-hasura-deployed-to-heroku/subtitles

Kyle Gill: [0:01] Gatsby can connect to any backend source data. The Why Chose Asura is an easy solution to provision and set up quickly. It also provides you with a graphical interface for managing data.

[0:11] Asura uses a graphQL engine that sits on top of a Postgres database to create an API automatically. Since our app needs a backend to interact with for storing user's playlists and up votes, we'll create one quickly to connect to Gatsby.

[0:25] I found the easiest way to get started with Asura is the Heroku one-click Deploy, which you can find the link to in this video's description. The one-click Deploy button will take you to Heroku and guide you through the process of logging in or signing up, naming your app. Then, we'll start building it.

[0:45] When it's completed, you can go to manage your app in Heroku and configure settings like environment variables there. Be sure to add two environment variables to start, Hasura GraphQL unauthorized role, set it to public, and Hasura GraphQl admin secret, set to your own secure password.

[1:14] There are certain environment variables like this that one set can configure internal Hasura options. The unauthorized role variable will allow you to set data in your API to be visible to unauthorized users, and the admin secret protect your server console from being publicly accessible online.

[1:30] With the newly created API, you can open up the Hasura engine with the Heroku open app button to view the graphical interface that allows you to update the backend. You'll notice that's password protected. You can sign in using the same value set in your Hasura GraphQl admin secret environment variable.

[1:48] This interface maps to the Postgres database that Hasura sits on top of, meaning you can create tables, add and edit data, and more here. Everything automatically gets exposed through the provided GraphQL endpoint displayed in the UI.

[2:02] Create a new table called the user using the buttons in the UI. Add columns for ID with text is the field type. No default value and make it unique. Name, but.text is the field type. Email. Created@ with a date as the field type with a default of now and last seen. Set ID is the primary key, and create the table.

[2:43] Create another new table called playlist, which will store users submitted playlists from Spotify. Create columns called ID, with an auto-incrementing integer as the field type and make it unique. URI but.text as the field type. Unique. Title with text as the field type. Description with text as the field type. Nullable.

[3:11] User ID, and create that with a timestamp as the field type. ID is the primary key. To link the two tables together, add user ID as a foreign key. The reference table is the only other table, user. The link goes from user ID field on the playlist table here to the ID field on the user table.

[3:43] The last table we need for the app is an upvote table, which counts upvotes on playlists and relates them to specific users. Create a column for ID with an auto-incrementing integer as the field type, and make it unique. User ID with text as the field type. Playlist ID as an integer. Upvoted app with a timestamp as the field type and nullable. ID is the primary key.

[4:18] The playlist ID and user ID should be included as foreign keys, which will allow you to query for the upvotes on the GraphQL playlist type or user type. The user ID and playlist ID fields can be combined to make unique key.

[4:41] Now, you can manage your database right with a Hasura console and enter sample data. Add data for each non-null or default field, and you can insert a playlist. Click browse roles to view it.

[4:59] If you go back to the GraphQL tab, you can write a query for add a playlist, which also have searching, sorting, filtering, pagination, and GraphQL subscriptions built-in and ready to go. To connect to this data stored in Postgres, you need to hit the endpoint at the top of the page from your app.

Generate a visually editable GraphQL API with Hasura, deployed to Heroku

Share this video with your friends

Additional resources:

Course

Build a full-stack JAMstack application with Gatsby, Hasura, and Auth0