Mutate database fields with Next.js using the Notion API
In this video, we learn how to perform mutations with the Notion API, and update properties in our Notion Database.
By adding a button to our Next.js application, users can now mark a movie as watched - which will permanently update this value in our Notion Database. Since this action is based off user input, we need to make sure we don't expose our API secrets on the client.
We can keep this value secure by implementing a serverless function to perform the mutation, and calling this URL endpoint from the client, when the user clicks the button.
This is surprisingly easy to do in Next.js using API routes. Simply create a pages/api folder and any JS files within it will automatically be turned into serverless functions. Variables such as the movie's id and is_watched - can be passed to the serverless function, via the request's body.
Additionally, we use the axios package to perform the HTTP request, as its API is slightly nicer to work with than the built-in fetch library.
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.