Mutate database fields with Next.js using the Notion API

Jon Meyers: [0:00] Our application can now suggest a random movie based on our Notion database, but if we do decide to watch that movie, there's no way to update this Watched property from our application. We need to remember to come to Notion and update that manually.

[0:12] Let's add a button to our application so we can update that value. It only makes sense to show our button if we have a selected movie so we can put this alongside our pre tag. When we click this button, we want to call a function that can handle that update.

[0:29] Let's write that now. We'd like to be able to use the Notion client to update that this movie has now been watched, but this function is being executed on the client. If we scroll down to look at when we create a new client for Notion, we require this NOTION_SECRET value that we don't want to expose in the client.

[0:46] GetStaticProps is a special function that Next.js gives us which executes on the server and gives us back the results. We're going to create a new serverless function that can handle updating that value in Notion's API without exposing the secret to the client.

[1:00] Let's start by creating a new folder in our pages directory called api, and then, within this folder, we're going to create a new file called mark-as-watched, and this will be a JavaScript file. Let's scaffold out our serverless function. We're just exporting out an asynchronous function here. It takes a request and a response as parameters and we're just sending the response "all good!".

[1:20] We can test this as working by going to /api/mark-as-watched and we see the text "all good!". We need to tell this function which movie id we would like to update and whether we're updating the Watched property to true or false.

[1:35] We can pull these values out of the req.body and we'll need to import our Notion client library, and create a new instance of our client. This NOTION_SECRET value that we specified in our.env file will automatically be available to our serverless functions.

[1:49] Next, we want to call notion.pages.update, and we want to set the page_id to the id that we've been passed in with our req.body. We want to pass the properties Watched checkbox to be whatever that isWatched value is. This is going to return us a promise. We need to await that data to come back, and we can just send that data back as the response.

[2:13] Now we just need to call our serverless function from our component. I'm going to install a package called axios to make this request, and that's just because it has a nice, clean API for making post requests, but you could do this with the built-in fetch library if you feel more comfortable.

[2:29] I'm going to import that library at the top and now I can use axios to call my serverless function in handleUpdate with our id set to movie.id and isWatched set to true. Axios is also going to return us a promise, so we need to set this function to async and then we can await the data.

[2:52] We can just console.log that out to have a look. Now we may navigate back to our movies page, and we choose a random movie. If we were to click Watch! On "Lost Boys," you'll see that value is updated in Notion's database. Our application is now able to update data using Notions API.