Request paginated data from Notion API with Next.js
In this video, we learn how to implement cursor-based pagination in our Next.js application, to request all movies from the Notion Database.
By default, Notion will return 100 results per request to the API. Therefore, we need to continue fetching results until we have the full set. This can be done using a while loop that checks the has_more field, returned by Notion's API, to determine whether we have fetched every movie.
If the has_more property is true, Notion will also provide a cursor value to fetch the next 100 results. When the has_more field is set to false, we have retrieved all movies from the Database, and can stop looping.
Instructor: [0:00] Our application appears to be working correctly, but if we console log out the length of our array, we'll see that we're only getting 100 results.
[0:07] If we go back to our Notion document, we have 119 movies in our database. If we add a filter for just our unwatched movies, we should still be getting back 110 movies. If we were to pass through the original data that we got as props and then log that out in our component, we'll see the property hasMore is set to true and we have a value here for our next cursor.
[0:34] Notion's API is only going to give us back 100 results at a time. If we want to grab the next 100 results we need to use this cursor. We can do this back in our getStaticProps function by declaring a new variable for all of our results.
[0:48] We're using let here because we want to be able to change this value. We also want to change our data declaration to use let as well. Then after we've made our first request to Notion's API, we can set results to be equal to a new array where we're going to spread in data.results.
[1:07] We can then use a While loop to say, while data.hasMore is set to true, we want to make another request to Notion's API by specifying the start cursor to be that data.nextCursor value. We then want to override our results array with the current results plus the new data.results.
[1:36] We can then perform this map over our entire results array rather than the most recent request. Now, if we remove this extra data prop and do the same up in our component, we can just print out the length of our movies again.
[1:51] If we come over here and refresh our page, I'm getting a reference error here because I'm trying to reinitialize the variable data. In the While loop we just need to remove the keyword let. Now when we refresh our page, we see we have our full 110 results and our choose movie functionality is still working.