Check out a free preview of the full Introduction to Serverless Functions course
The "Adding to the Database" Lesson is part of the full, Introduction to Serverless Functions course featured in this preview video. Here's what you'd learn in this lesson:
Jason continues coding the application by adding a new serverless function that allows users to post data to the Hasura database, and uses a GraphQL mutation to link the UI to the database, and allow the posting of new data from the UI to the database.
Transcript from the "Adding to the Database" Lesson
[00:00:00]
>> And so now that we're able to actually submit things and we're gonna show that response again, which we can validate by, again, we're looking out here, this response came back so we can see it. Now we can actually like handle these. So given that we've got the id title, tagline and poster, let's build our variables object and send off a query.
[00:00:23]
And so the query that we're gonna send off is going to be just the same one that we wrote in here. So I'm gonna go copy it instead of trying to write it out again. So let me grab this mutation right out of the Hasura console, all right?
[00:00:40]
And I'm gonna bring it back over. And out here, we will, Oops. Set up a result and that's gonna be awaiting query, I'll make this smaller again. So we're pulling in query from Hasura and then we're gonna await a call to query. And this time we're gonna include variables.
[00:01:11]
And our variables are actually just gonna be id title, tagline and poster, so we can put those in right away. Then we've got this query here, I'm gonna paste that in. And we've got all these values. Now again, I don't really need that name. So I'm just gonna drop it and we're gonna stick with just that.
[00:01:28]
Another thing that I don't want here is I want this to fail if we leave it blank. So I'm gonna change all of these equals here to an exclamation point. And what this means in GraphQL is that we want this to be a required value, we have to provide a string.
[00:01:46]
And so if it defaults to null, we actually don't want that, we want it to say hey, you forgot to give me a value. So once we have this result, right? This is gonna send it off and that's gonna tell Hasura to save this entry. After that, all we have to do is instead of sending back the body, we can JSON.stringify, Result.
[00:02:18]
Okay, so now, here's our moment of truth. Let's try to save one of these movies. So I'm gonna open up here, get into movies.json. Let's just take one of these across. So I'm gonna go into our form again. And I'm gonna put the ID in. I'm gonna grab the name, or do we already put this one in, let me check real quick.
[00:02:41]
I don't want duplicates. Data, let's look at movies. We already did Starship Boopers. All right, so let's move on. We'll do this one. So I'm gonna put in the ID. We'll get the title, we'll get the tagline. And then let's grab out this poster link. Okay, so these are our values.
[00:03:08]
And what I want to happen is I want to see a call go off to add movie, and I want it to report back 200, so let's give it a try. There's our call to add movie. We can see that we inserted one movie and we get back the movie that we inserted, and we can validate that by going over to Hasura.
[00:03:29]
And if we hit this Run Query, it just looks for more data. There we go, our movies in. We've done it. So then we can go back out to our homepage, And we'll see, I'm gonna make this bigger again. That movie has been added. Okay, so now we're getting real close here, right?
[00:03:51]
We're almost done because now what we've got is we're loading data from a database. We are augmenting that data from our database with third party API data, we're able to load in these scores and ratings. Then we're now able to create new entries. We can add our movies from the website itself.
[00:04:12]
Okay, so we're almost all the way to a full app.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops