DEV Community

Cover image for Updating a Notion page through a node website
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Updating a Notion page through a node website

By now, we have created a website to showcase movies from our Notion database.
That already is pretty awesome, but let's take a step further and add the option to update these Notion pages.

What we'll do is add a checkbox to indicate whether we saw a movie or not.

This will send a request to our Node express server and update the Notion document page with the value of the checkbox.

To write down the steps that need to happen:

  • Render checkbox for each movie
  • Click checkbox
  • Call Node server PUT movie endpoint with a checkbox value
  • Node server executes Notion update call

In total, it should look something like this:

Updating a Notion page through a node website

Creating the Notion update call

Let's start with the Notion update call first.

Open the modules/notion.js document and create a new function called toggleMovie.

toggleMovie: async (id, value) => {
    await notion.pages.update({
      page_id: id,
      properties: {
        Watched: { checkbox: value },
      },
    });
},
Enter fullscreen mode Exit fullscreen mode

We add two parameters to this call: the id and the value.
The id is the unique page id.

Then we call the Notion page update query and pass the property we want to change, the Watched property checkbox value.

We can now use this function in the following manner.

const {toggleMovie} = require('./modules/notion');

await toggleMovie('UNIQUE-ID', true | false);
Enter fullscreen mode Exit fullscreen mode

Calling the toggleMovie function from our Node app

Then we introduced some middleware in the form of our Node express app.

Let's import the toggleMovie function:

const {getDatabase, toggleMovie} = require('./modules/notion');
Enter fullscreen mode Exit fullscreen mode

Then we need to enable express to handle post requests:

app.use(express.json());
Enter fullscreen mode Exit fullscreen mode

Then we make a put request:

app.put('/movie/:id', async (req, res) => {
  await toggleMovie(req.params.id, req.body.checked);
  res.json('done');
});
Enter fullscreen mode Exit fullscreen mode

As you can see, it includes a part :id. This is a dynamic route, and we can retrieve that by using the req.params.id method.
Where id refers to the variable name in :id.

Binding it together in the front end

Now it's time to bind everything together in the front end.

Let's create a function that will call our Node API, to begin with.

const updateMovie = async (id, checked) => {
  await fetch(`http://localhost:8000/movie/${id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({checked: checked}),
  });
};
Enter fullscreen mode Exit fullscreen mode

This is a fetch call that performs a PUT request to our movie id endpoint.
And it passed a variable checked value.

Now let's add the checkbox to our front end. The first goal is to render this in a way that shows the current state.

const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = movie.watched;
checkbox.className = 'absolute w-5 h-5 -top-2 right-4';
textCardDiv.appendChild(checkbox);
Enter fullscreen mode Exit fullscreen mode

The initial value is set by the movie.watched variable, which refers to the boolean value.

Since the checkbox is absolute, we need to add a relative class to the parent div.

textContainerDiv.className = 'relative z-10 px-4 -mt-8';
Enter fullscreen mode Exit fullscreen mode

The last part is to bind a change event to our checkbox. This will fire every time our checkbox changes value. And it's what will execute our calls.

checkbox.addEventListener('change', (event) => {
  updateMovie(movie.id, event.currentTarget.checked);
});
Enter fullscreen mode Exit fullscreen mode

We pass the movie id to our function, as well as the current checkbox value. This already reflects the changed value, so we don't need to invert it for this method.

And that's it. We now have the option to update a Notion page through our own Node express website.

You can find the complete code example on GitHub.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (0)