Getting Set Up with Hasura

[00:00:00]
>> The next part that we're gonna get into is where things really start to get exciting, because we're going to stand up a custom database, and then we're gonna use that to manage our site. So instead of having this hard coded .JSON file, we're gonna use a database, and then we're gonna interact with our database.

[00:00:18]
So, for this, we're going to use Hasura, Hasura is a really powerful kind of database management tool. They have a free cloud offering, which is one of the reasons that I like it. It's very quick to get started with which I think is important. In order to use this, you are gonna need to have a Hasura Cloud account.

[00:00:42]
So if you go to hasura.io, you'll be able to try Hasura Cloud here. Hasura Cloud is easiest to use if you have Heroku. And signing up for both of these is very fast if you haven't done it before. So what we are going to do is I'm going to make sure that I'm logged into my Hasura Cloud account or my Heroku Cloud account or whatever I'm trying to say, Heroku account.

[00:01:09]
So I'm logging in, okay. Now that I'm logged in, I'm done. I don't need to do anything else with Heroku. I just need to have an account and be logged in. Everything else will get managed by Hasura. Next I'm gonna go to Hasura Cloud. And I'm gonna click this try button.

[00:01:32]
And they've got everything that I need here. I think I have my account through Google. So let's find out. Yes, all right. And they are going to walk you through creating a new project. Now I'm gonna use this try with Heroku button. I'm gonna give everyone a second to do that because I assume that folks had to create both Heroku and Hasura accounts just now.

[00:02:02]
So go ahead and get caught up to this point, the Heroku account, you can sign up pretty quickly I hope and the Hasura account is nice and quick. You can use your GitHub account or your Google account to get running really fast. And just a reminder, all of this stuff is free, you won't have to enter credit cards.

[00:02:21]
It's just a thing we can try and it's gonna be a lot of fun. I'm gonna click this big O button, it's gonna log me in. It's creating our app, we're happy. It automatically created all that for us. Done, good. We've got a Postgres database, that's all we need.

[00:02:36]
So I'm gonna create a project. All right, so now we have a couple things going on here, we have a new GraphQL API. We've got a name of it, all these things. So this is the stuff that we're gonna use. I'm gonna start by copying this GraphQL API.

[00:02:52]
All right, and then I need to create a new, this one is gonna be called let's see. HASURA_API_URL is what I called it. And the other one that we're gonna grab out is the HASURA_ADMIN_SECRET. So once we've got those, we'll go back into our dot n file. And I'm gonna get HASURA, HASURA_API_URL and I copied this one, the API URL.

[00:03:41]
So I'm gonna paste that in and then I have the HASURA_ADMIN_SECRET is what I called that I believe. HASURA_ADMIN_SECRET and I'm going to copy that from the Admin Secret field. Okay, so I've got both of those saved, set up, we're good to go, we're ready to actually start working with some data.

[00:04:09]
So what we did before this point is we set up a Heroku account, and a Hasura account and then I created a new project here. So we've got our GraphQL API URL, and we've got this admin secret. And the admin secret is what gives us permission to open this console.

[00:04:26]
So we've got these set, and we saved those in our project as HASURA_API_URL and HASURA_ ADMIN_ SECRET. Now that we've got these, we're gonna launch the console, and we're gonna start working on building our data. So what we need to do is in the console, we're gonna head over to the data tab.

[00:04:49]
And in here, we're gonna create a new table. And so the table that we need to create is going to be called movies. And we're just gonna mimic the shape of that JSON file. So I'm going to actually just pull it up so I can look at it.

[00:05:03]
And we're gonna look at movies.JSON. And each one has an ID, a title, a tagline and a poster. So let's create those over here, I've got an ID. And for all of these, we're just going to use the text type. Had a title, that's gonna be text as well, a tagline And a poster.

[00:05:32]
Okay, so once we've created these, the table name is movies. The columns just line up with what our JSON object has, ID, title, tagline, poster, and then our primary key is gonna be the ID. So we need that one to be unique, that's fine. We're using the IMDB IDs so those will always be unique.

[00:05:53]
And we don't need to do anything else so we can just add this table. So once we've created it, here we go, we've got our ID, our title, our tagline and our poster. Let's just add one of these, so I'm gonna insert a row. I'm gonna use this insert row tab, and I'm gonna head over to movies.JSON, and let's just grab the first one.

[00:06:16]
So we'll give it an ID, we'll grab the title, I'm gonna grab this tagline and I'm gonna grab the poster. Okay, so once I've saved this then I can browse my rows and we can see that now I've created an entry. And so what this means is that now we have a database that we can pull from.

[00:06:45]
And this is gonna be a little more of, I would say probably a real world use case of serverless functions. A JSON file is actually really, really good. If you are doing something where your company has a small number of infrequently changing bits of data, highlighted articles or a pricing table or something like that, that it's not going to change often, but it's going to get used in a few places throughout the site.

[00:07:09]
You wanna keep that data in sync, using this JSON approach is really good for that. Because then we could just update like, yeah, here are our pricing plans. And then if we show it on the pricing page, on the homepage, on the accounting page, all those places pull from the same data.

[00:07:24]
And we have an easy way for if marketing needs to make a change, they can just come in and throw that, update that headline, or update the plan name or whatever they need to do. And it updates across the site because the serverless function is used. When we start getting into something that would change a little more frequently, like we're effectively using this the way that you would use a content management system.

[00:07:46]
So we're gonna have movies and those movies could get added frequently in a complete scenario where we were actually listing all of the movies. These would get updated, at least a few a week would be coming out. So we need a little more of a robust way. You don't wanna have to update a JSON file every time a movie comes out, it would get really big that gets hard to manage, it starts to get slow.

[00:08:09]
So using a database is gonna help us overcome a lot of those challenges. And we can just build a UI or we can use something like this where someone can come in and just add new data. So to actually get it, this data, we are going to be using GraphQL, which is a really nice thing, we can just explore it in here.

[00:08:34]
And this kinda comes built-in to Hasura. So we've got this GraphQL Explorer on the Graphical tab. And what Graphical is is it's kind of a UI that automatically pulls in a bunch of information that we need to work with GraphQL. And we can see that we've got a lot of stuff going on over on the left hand side, we've got this explorer pane.

[00:08:58]
Up at the top, we've got some buttons for we can purify, we can get some history, there's a couple things that maybe we don't need to worry about. And then we've got this Doc's link. And if I click this Doc's link, it looks like I can do some things.

[00:09:11]
So a query that's gonna be like we wanna do a lookup. So I wanna look up all my movies. So I click in here, here's my movie. So I'm gonna click on this and then that's gonna give me back, we're gonna fetch data from the table movies. All right, and then I can get these sorts of arguments.

[00:09:27]
I can limit them, I can do a query to get a subset and it's gonna return back an array of movies. And each of those is gonna have the ID poster tagline and title. So this is fairly explorable, that's really nice. But where it really gets interesting is over here, I can just click movies and I can click ID, poster, tagline and title.

[00:09:49]
And then I can hit this play button and there's our data. So this is pretty sleek, like one of the things that I love about GraphQL is that it's a kind of an inherently explorable way of interfacing with data. As opposed to something like REST, where REST gives you URLs and you have to hit each URL to see what data comes back.

[00:10:14]
And then you kind of have to draw these mental maps between, all right, so I got to hit the movies endpoint. And then once I hit the movies endpoint, I'm gonna get this data back. And like if we had comments or ratings or something, those might be under a different endpoint where I'd have to call that and then stitch that data together.

[00:10:31]
It ends up being a lot and it's kind of hard to track whereas with something like this, we literally just have a drop down and we click buttons and that builds our query. This is a a fully functional query that we can use.