Request Notion database data from the API with Next.js
In this video we learn how to use Notion's client library to request data from a Database, and display the results in our Next.js application.
We will be adding a new page to our application that will help select a random movie for us to watch, using data from our Notion Database. To authorize access to this Database we must add it as an integration, and create a client using the Notion Secret value. Again, we will be pre-rendering this static page at build-time, using Next.js' getStaticProps function.
Additionally, we will learn how to filter and transform our data on the server-side, so we are only passing our component the necessary data for it to render our movies. Lastly, we implement a chooseMovie function that can choose a random value between the bounds of the lowest and highest index of our movies array.
Instructor: [0:00] Here I have a Notion database with a collection of movies that I want to watch. Each movie has a title, a collection of categories, and whether or not I've watched it yet.
[0:08] What this page is missing is a button that I can click and it automatically suggests a movie for me to watch. Let's build that into our recipes application. The first thing we need to do is make sure we share this database with our integration. Our integration was called recipes and we can invite them.
[0:24] We now need to copy our database ID from the URL here and we can paste this into our .env file under a new environment variable called databaseID. We need to restart our development server to read in that new environment variable.
[0:40] Let's create a new page for our movies route and build out our basic page component. We can navigate to our new route to make sure that's working. Again, we want this page to be static, so we can export out our getStaticProps function.
[1:01] Here we want to create a new Notion client. We'll need to import that client library. Now we can query our database by saying notion.databases.query. Again, this takes a configuration object where we can say databaseID is set to that process.env.databaseID.
[1:27] This will return us a promise, so we can await that data. Let's pass that data through to our component as props. We can then destructure this here and print it out in our pretag. Now when we refresh our page, we see a big list of all of our movies.
[1:52] One thing to note here is that we are grabbing every single movie, even the ones that we have watched. Let's filter those out. We can add a filter to our configuration object and we want to filter on the property watched. We only want to see results where the checkbox equals false.
[2:10] If we refresh, we should only see results for movies that we have not yet watched. There's a lot of data for each of these objects where we probably only care about the ID, the categories, and the title. Let's filter those out before returning our props.
[2:27] We can get our ID from movie.ID, our title from properties.Title.title, and then index zero and we can come down to this plain text value here. Then for categories, we can go to properties.categories.multiSelect. This is an array, so we can iterate over each one of these items in our multiSelect and just grab the name.
[3:03] Now rather than returning our data, we want to return our movies. Which means up in our component we need to rename our property to movies and print that out. If we refresh our page, we should see some much more sensible data. Back over in our component, let's replace this pretag with a button.
[3:23] We want that button to choose us a movie, so let's add an onClick handler. This can call our chooseMovie function. Let's define that function above. The first thing we want to do in our function is choose a random number between zero and the length of our array.
[3:45] We can do this by using the math library. We can say we want the floor value. This is rounded down. Then we want to pass that the value math.random, which is a function that gives us a random value between zero and one. We want to multiply that by the length of our movies array.
[4:03] If we just console log that value out and give this button a couple of clicks, we can see that this is giving us a random value each time, but that value will never go over the length of our array.
[4:15] Now we can use that random number as an index to access that movie in our movies array. Now if we click that button a few times, we should get a couple of random movies. Great.
[4:25] Now we just need to display that on our page rather than in the console, so let's import useState from React and create a new state variable for our movie. This can just be set to null initially. We then want to call setMovie instead of console log here. We'll display our movie alongside our button. Again, we'll just pretty print that value in a pretag.
[4:56] We probably don't want this to display null in the browser, so let's wrap this in a conditional that only displays if the movie is a truthy value. That looks much better. Now as we click through our movies we can get different suggestions on movies we could watch from our Notion's database.