Update Data in Database Triggered by Client Interactions with Netlify Serverless Functions
We'll update our boops count by utilizing the update_boops_by_pk, an auto-generated query provided by Hasura.
We'll create a new serverless function called add-boop.js that takes events and arguments provided by the UpdateBoopCount mutation.
We can increment and store the boop count by making a request with the handleBoop function.
As UX improvements, the button is disabled and enabled when the increment boop function is being called. The button text updates to match the current state.
Jason Lengstorf: [0:00] To save boop data, we need to create another mutation. We're going to come over here, click this + button next to mutation. Then, we're going to use updateBoopsbyPk. I want to name this one, so we're going to call it updateBoopCount. Then, we're going to use the PK column's ID, which is the ID of the corgi.
[0:21] If I hit this ID here, I don't want that to be optional, so I'm going to use an exclamation point instead to say that we need one. Then down here, we know that we need an ID, so I'm going to put in one of our photo IDs, so that we can test that this is working.
[0:37] Next, what I want to do is I just want to increment the count. I'm going to increment the count by 1. We can see that it's going to increment by 1. Then, what we're going to get back is the ID and the count. Whatever the count was, it's going to go up by 1, so it's 6. Run it again, now, it's 7. Run it again, now, it's 8.
[1:00] Each of these is going to allow us to quickly update the value. This is a feature of Postgres to run this increment, and then Hasura makes it easy for us to use by exposing it through this Update Boops by PK. This is a really nice feature. Again, this is just something that would be kind of a pain to do by hand. This is just built into Hasura which is one of the reasons why I like this as a tool.
[1:24] If we copy this, we can head over to our site, and we're going to create a new function. This new function is going to be called addBoop.js. In this function, we are going to load Hasura request from our utility, and that's going to equal requireUtilHasura. That's going to export a handler.
[1:50] A handler is going to be async and this one is going to get an event. This now we're getting into something a little more advanced with serverless functions. Now we're going to take arguments.
[1:59] Before, all we were doing is saying call this function, I'll give you some data. Now, we're going to require that someone sends us an ID in order to use it. The way that we do that is we're going to get that out of the event body. We're going to destructure it out of the event body, and we're going to send it to our serverless function as JSON, which means that we're going to parse it out of the event.body.
[2:26] This means that now we're able to use that ID in our request as our variable. If I set up our data, to be await Hasura request, and we're going to send a query, and that query is going to be the mutation we just wrote...
[2:47] We're updating the boot count. We're going to update by the primary key. We've got the columns of ID, and we're using this ID that we're setting here, which is going to be this value. We're going to increment the count by 1.
[3:00] Our next argument is going to be variables. For that, we're just going to pass in this ID. We can return that with a status code of 200 and a body of JSON.stringify(data). That is a serverless function that will take an ID of a photo and update its count.
[3:29] Let's test this out. Let's go get one of our counts from here. Let's grab this one. Admiral Ackbar does not have any boops yet. Let's inspect and grab the ID out of this button, then let's go to Postman. First, let's restart so that we load this function.
[3:50] This is now running at localhost:8000. Let's go to Postman. We're going to run http://localhost:8888. Then it goes to Netlify functions, and this will be addBoop(). What we need to send in in the body is some JSON. I'm going to select JSON over here. We're just going to pass in ID and this.
[4:17] What this should do is this should send the ID to our function. What we should get back is the ID and a count, which should be 1, because it's currently . There we go. Now we have the ability to increment and store our boop count. If we load this out here again, we can see that it's been booped.
[4:45] Now we just need to call this from our site. Out here in our index.html, we are already loading our corgi so we can drop that out. Let's head up to this corgiHandleBoop. Now, we are handling our boop, by just setting the boops + 1. That's fine, but again, it's not going to persist, we need to send this to Hasura. To do that, we're going to first fetch our function.
[5:16] Netlify functions, addBoop, and we're going to use POST, because we're going to send in the ID. We're going to JSON.stringify(ID) and use the corgi's ID. What we get back is a result in JSON. We parse that. Then we're going to get some data.
[5:45] The data that we want is to set our boops to the data.updated.count. Instead of having to do updateBoopsbyPk, let's alias this to updated. Now if we send this again, we can see right now it's updateBoopsbyPk. Let's change it. Now it's updated.
[6:11] That'll make it easier for us to access in the index.html. It'll be data.updated.count instead of data. updateBoopsbyPk. Again, it's a convenience. You can do whatever you want. This is nice for me.
[6:25] The other thing that I want to do, we're going to drop this one out. I want to make sure that we don't allow clicking in the middle of an update, because it can take a second for that to update. We want to add a little bit of UX improvement. Let's also set booping. We're going to useState. We're going to default it to false.
[6:51] What'll happen here is we want to make sure that if we're booping, actively clicking the button, you can't click it again. We're going to start when you click this by set booping to true. If you are booping, then we're going to disable this button. We can come out here and say disabled = booping.
[7:15] What will happen now, if we come out here and reload the page, is we can click this. It gets disabled. Now we're booped once, but it's still disabled. We have to remember to re-enable it, which we'll do down here. Set booping to false. Now we come back out here and reload the page. We can click and it gets disabled until it's done.
[7:50] As a last little bit of UX improvement, let's change that text, so that the text is communicative of what's going on. We'll check if we're booping. We'll say, "Please hold, booping." If not, we'll say, "Booped boops times." We'll use this button text in place of this.
[8:27] We can save that. Reload the page. Now when we go to boop, it says, "Please hold, booping." Then when it's done, it tells us how many times we've been booped. Look at that thing go.
[8:42] That is a fully functional serverless app. If we reload the page, we can see that all of our boops are persisted.