My journey
Integrating Notion with Outerbase

Integrating Notion with Outerbase

In this article, I will go through how you can create a command to integrate notion and call that command to display info in frontend.

Shreyas Chaliha's photo
Shreyas Chaliha
·

4 min read

NOTE: Outerbase is in beta, so things are subject to change. This article will explain how I created a command to integrate Notion with Outerbase. I created a command that fetches information from Notion and then called that command in my next.js application to display the information from Notion.

Outerbase: Outerbase is a modern, cloud-based database interface that enhances teamwork and efficiency. It features EZQL, a natural language to SQL agent for easy data queries, and allows real-time collaboration, workflow automation, and data visualization. It's suitable for developers for simplified database management, product teams for direct data access, and businesses for a comprehensive database view and cost reduction.

Notion: Notion is a versatile and popular productivity and collaboration software platform that provides tools for note-taking, project management, database management, document creation, and more. It allows users to create and organize various types of content in a flexible and interconnected manner. Notion is designed to be customizable, making it suitable for a wide range of personal and professional use cases.

Pre-requirement

  1. Next.js application

  2. A Database in Notion

What will I not cover in this article?

  1. How to set the basic next.js installation. For that, check the next.js documentation

  2. How to create a database in Notion. They have a great guide on their official site, so you can check that one out here. If you have never created one before and are very new to this space, I would recommend you click on this link and then duplicate it by clicking on the "Duplicate" button on the top right corner.

What will I cover in this article?

Going forward, I will assume that you made a "Duplicate" of my database.

  1. Getting your database id

  2. Creating an integration in Notion.

  3. Connecting the Notion database with the created Notion integration.

  4. Creating a Command in Outerbase to integrate the Notion API.

Fetching data with the help of the created Command and then displaying that data in the front end.

Getting the database ID

  1. Once you have made a duplicate of my database from the link I have shared. You should see something similar to this.

    1. The link that gets generated should be something similar to this
      'notion.so/0ad335653a7b4979ac69a49b60f20725?..

    2. Your database id is the number after '/' after 'so' until '?', so in this case, it is "0ad335653a7b4979ac69a49b60f20725". It always has 32 characters.

Creating an integration in Notion

I am assuming you have the database set up.

  1. Go to https://www.notion.so/my-integrations

  2. Click on "+ New Integration"

  3. Name it to your liking I named it "outerbase-integration" and then click on "Submit"

  4. Now you should see your Secret Key. Keep it safe somewhere; we will use it while creating the command.

The database id and the secret key are all you need to integrate the Notion Public API with the Outerbase command.

Connecting the Notion database with the created Notion integration

Now we need to connect the database with the notion integration. This step is really important.

  1. Click on the '...' button on the top right corner of your database, and a drop-down menu will appear. Click on 'Add Connections' and find the same integration you just created for me; it is called 'outerbase-integration'.

    1. Verification: To check that the integration has successfully connected with the database. Run this curl command with your database id and secret key
curl 'https://api.notion.com/v1/databases/DATABASE_ID' \
  -H 'Authorization: Bearer YOUR_NOTION_SECRET' \
  -H 'Notion-Version: 2022-06-28'

For successful integration, you should see something similar to this:

Creating a Command in Outerbase to integrate the Notion API

  1. Click on the "+ New Icon" and click on "Commands"

  2. A form will appear. Fill in the values with your desired name and Choose Post.

  3. Click on "+" below the box and Click on "Javascript"

  4. Paste the following code:

     async function userCode() {
       const response = await fetch(`https://api.notion.com/v1/databases/YOUR_DATABASE_ID/query`, {
       method:"POST",
       headers: {
         'Authorization': 'Bearer YOUR_API_SECRET',
         'Content-Type': 'application/json',
         'Notion-Version': '2022-06-28'
       },
     });
     const data = response.json()
   return data;
 }

    That's it. You have successfully created a Command in Outerbase to integrate Notion.

Communicating with Front-end with the created command

  1. Feel free to check out the whole code here. In this article, I will only go through the communication part.

  2. In my code you will notice this part

 const database = await fetch(
    `https://daily-beige.cmd.outerbase.io/getDatabase`,
    {
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      cache: "no-cache",
    }
  );
  const data = await database.json();
  const { results } = data;

This is how I am calling the Outerbase command to fetch the information.

Then I created a simple table to display the content. Which can be seen here.

Github Repo: https://github.com/trace2798/outerbase-command-notion

I hope this article helps you. If you have any questions, feel free to leave a comment, and I will respond to them as soon as possible.

Happy Hacking !!!

Outerbaseouterbasehackathon