Integration of Notion with JS

The wait is over. The Notion API has entered the world.

Disclaimer: I am still playing around with the NotionAPI, therefore this blog will get updated with more insights of how to efficiently make use of the NotionAPI.

Without further delay, let’s jump into the implementation of Notion API with JS. In this process, we will be doing:

1. Creation of Integration in order to work with the NotionAPI. (Basically, creating the Secret key)
2. Creation of a workspace in which we will be updating the contents using the NotionAPI.
3. Implementation of the NotionAPI.

Note: Notion has provided the Restful API and the NotionClient in order to integrate with our applications. In this blog, I will be using the NotionClient

I have included the source code for your reference. Feel free to refer it.

Creation of Integration in order to work with the NotionAPI.

Notion has an Integration page where you can configure a new integration to generate the secret credentials.

a. Open the Notion Integration and sign in
b. Click on the New Integration button which can be found in the left panel.
c. Enter the name for the integration that you create and select the workspace for which you are going to use it.
d. Submit the changes and it will generate the Secret key. Copy and Paste it in your text editor. This will be used as the Secret Key when integrating the Notion API.

Creation of a workspace in which we will be updating the contents using the NotionAPI.

We need to provide access to the Integration (Secret credentials) for the workspace which we will update via the API.

a. Open the workspace that we are going to integrate with the Notion API.
b. Click Share button at the top right corner and click Add People, emails, groups
c. Select the Integration that we created and provide access by clicking the invitebutton.

Allow the Notion Integration to edit the workspace.

Once the above process is done, let’s create a table in the workspace by typing /table and get the ID of the table. This will be used to update the table via Notion API.

Insert Table to update data from NotionAPI.

Implementation of the NotionAPI.

Now, we got all the necessary information in order to work with the NotionAPI and JS. Let’s implement the Notion API with the JS with the below steps.

Note: I already created a new project by running npm init . You can also follow the below steps on an existing project also. The repo link will be given below of this blog for your reference.

This is my basic project that created for this blog.

1. Install @notionhq/client by running npm i --save-dev @notionhq/client
2. Open index.js file and import the Notion . Configure the Notion with the Secret key that we created in Step 1.

3. Now, we have configured the Notion with Nodejs. Let’s fetch the data from the table that we created by using the request function.

Below is a preview of the returned response from the Notion API.

4. Let’s add some data to the Notion Table. Using the request in Notion, we can do a POST method by passing the data that we need to add.

Once the above code ran, the Notion Table will be updated as below.

Output of the Data creation using Notion and JS

That’s it. Now, you can update the Notion Table using the NotionAPI. This will definitely avoid a lot of manual works for the developers mainly 😎. For me, this will be a super useful beacuse each time I run an automation task, I need to update the result to the Notion page manually. But now, I can easily integrate the NotionAPI to update the page.

I hope this blog was useful for you. Please feel free to comment your suggestions so that we can improve this blog.

Link for the github repo: https://github.com/ak2403/Notion-Medium-Blog