DEV Community: Yann IRBAH

How to add Webhooks to any API

Yann IRBAH — Mon, 07 Mar 2022 16:29:39 +0000

While working on part 3 for my Notion + Qovery series, I was faced with an issue. How could I get notified when a Qovery application status changes, and how to know if a Notion database was updated?

The common solution to this problem is to provide a Webhook. According to the Wikipedia definition:

A webhook in web development is a method of augmenting or altering the behavior of a web page or web application with custom callbacks.

This means, a system will proactively call some endpoint to notify another application whenever some data changed, or some event happened. The receiver application can then act on it.

But neither Qovery nor Notion provide webhooks at the moment, and that’s the case for many other products. Since this is a recurring need for me I decided to create a simple tool, instead of re-inventing the wheel for every project that needs it.

Introducing CaptainHook

The tool I created is called CaptainHook. It’s a simple NodeJS service that will poll API endpoints and forward the response to an arbitrary URL whenever it changes. It’s based on the concept of Trackers. You can create any number of trackers, each of them being responsible to monitor an endpoint. You can check the code on GitHub. It’s very easy to use and the README provides all the information needed. Feel free to use it for your own purpose, but keep in mind that I created it for my personal needs, and not for production.

My goal for this article is not to detail how to use CaptainHook, but to explain the underlying principles so you can implement your own.

How does it work?

CaptainHook is not rocket science and only does a few things:

Poll an API endpoint at a configurable interval.
Compare the response from the endpoint to the previous one.
If the response changed, post the body to an URL and store it.

Polling

Unfortunately, there is no dark magic allowing us to create webhooks out of thin electrons. So to get data changes, we need to act like an annoying project manager poking your shoulder to know if you finished working on your feature all day long (Pro-Tip: If you can relate, find another job!).

But in our case, it’s our only choice so let’s be toxic. We will send requests to the API endpoint we want to monitor on a regular basis. The interval we poll at depends on many parameters:

How often do I need to get data updates?
Are there rate limits on the target API?
Is it worth using bandwidth for my case?

Ideally, you should avoid polling too often. Creating load on the target API server for no reason is always a bad idea and a waste of resources. Even if there is no documented rate-limiting in place, sending requests every 10ms could identify you as a DoS attacker and get you blocked. Also, it’s not very kind. Let’s be responsible. So how often do you really need those updates? Chose carefully.

Possible implementation in NodeJS could be as simple as a setInterval (that’s how CaptainHook works). Other languages could use a loop with a sleep. Or you could go crazy and use worker queues, Erlang gen_server … This part really depends on your scaling needs and the technology you’re using.

Compare

Once you get a response from your API, the next step is to check if the payload changed. It is as simple as doing a string comparison between the previous response and the one you just received. If it did change, forward the new value to the target URL. If not, do nothing.

Store

For that matter, you need to store those responses. CaptainHook uses PostgreSQL because it’s what most developers are familiar with, but it could be any persistent storage.

You can store the raw body of the response in the DB directly. At the time of writing, I chose to compute the MD5 of the responses to store and compare shorter strings. After investigation, it seems like it doesn’t bring any advantage other than slightly reducing the storage in the DB. Computing the hash is also way more CPU intensive than comparing two longer strings.

Conclusion

That’s all you need to emulate webhooks on any API. It can be as simple as a simple block of code in your project handling just one endpoint, or a separate service like CaptainHook, working for more generic use cases. But keep in mind that this solution won’t replace real webhooks. It’s more like a workaround when none is available. It’s still doing a higher number of requests on the target API so use this approach carefully.

Happy Hooking!

NotionOps - Part 2: Write Qovery data into Notion

Yann IRBAH — Thu, 17 Feb 2022 12:33:50 +0000

Here is the next step in our NotionOps journey. Recap of what we have done so far:

We created a basic Node.js project.
We integrated with the Qovery API to retrieve the list of the projects in our organization.
We integrated with the Notion API to retrieve a page.

Goal

Now things get exciting. Reading from API is cool, but the real fun begins when we make tools interact. We will automatically create pages and databases in Notion for this second part, based on our running applications on Qovery. We'll also refresh the list every X seconds.

Create the top-level Notion database

In PART 1, we created a simple NotionOps page for the sake of simplicity. However, using a database as our parent will make things easier.

Delete your NotionOps page
Create a new NotionOps page as a database. We'll pick the Gallery view since it will be a nice way to display our projects.
Share the page with your integration.
Retrieve the ID of the page from the sharing link.
Update the NOTION_PAGE_ID value in your .env file.

You now have a database with a gallery view as a parent page. Let's edit the properties of the database:

Click on the Properties link at the top of your gallery.
Delete the existing properties except for Name.
Create two new text properties: Description and Qovery ID.
Uncheck Qovery ID since we don't need to see it on our card.

Add projects to our Notion database

Now let's get some data into our freshly created database. We already have a function to read Qovery projects from the API. Let’s first enrich our notion.js file with a new function for adding entries to our projects database:

exports.createProject = async (project) => {
  const res = await notion.pages.create({
    parent: {
      type: "database_id",
      database_id: notionPageID,
    },
    cover: {
      type: "external",
      external: {
        url: `https://source.unsplash.com/random/900x700/?abstract,${project.id}`
      }
    },    
    properties: {
      Name: {
        title: [{
          text: {
            content: project.name
          }
        }]
      },
      "Qovery ID": {
        rich_text: [{
          text: {
            content: project.id
          }
        }]
      },      
      "Description": {
        rich_text: [{
          text: {
            content: project.description
          }
        }]
      },      
    }
  });  

  return res;
}

The payload structure looks a bit complex, but you can refer to the API documentation for all the details.

The only thing you might wonder about is the cover part. Using the URL https://source.unsplash.com/random/900x700/?abstract,${project.id}, we are loading random images from Unsplash to use as a cover for our cards. It is optional, but we want our gallery to look fancy, don't we?

Update your index.js to call this new function:

require("dotenv").config();

const qoveryClient = require("./src/apis/qovery");
const notionClient = require("./src/apis/notion");

const createNotionProjects = async (projectsList) => {
  await Promise.all(projectsList.map((project) => (
    notionClient.createProject(project)
  )))
}

qoveryClient.listProjects()
  .then(async (projects) => await createNotionProjects(projects))
  .catch((e) => console.log("ERROR", e.message));

Rerun your program:

yarn start

And voila! You should see your Qovery projects in your Notion database.

Run the program one more time. Oops! Our projects are duplicated. Let's fix that! First, remove the exports on the createProject function. We'll export another one called createOrUpdateProject later.

Now we need to look into our database to find if we already have an entry with a given Qovery ID:

const findProjectByQoveryID = async (qoveryID) => {
  const res = await notion.databases.query({
    database_id: notionPageID,
    filter: {
      property: 'Qovery ID',
      text: {
        equals: qoveryID,
      },
    }
  });

  return res.results[0];  
}

We use the filter property, which works the same as in the Notion UI, matching the actual Qovery ID with the same property in the database. Since a database query always returns an Array, we only need to return the first element.

Then, create a new updateProject function:

const updateProject = async (notionID, project) => {
  const res = await notion.pages.update({
    page_id: notionID,
    properties: {
      Name: {
        title: [{
          text: {
            content: project.name
          }
        }]
      },   
      "Description": {
        rich_text: [{
          text: {
            content: project.description
          }
        }]
      },
    },
  });

  return res;
}

And our new exported function createOrUpdateProject:

exports.createOrUpdateProject = async (project) => {
  let res;
  const notionProject = await findProjectByQoveryID(project.id);

  if (notionProject) {
    res = await updateProject(notionProject.id, project);
  } else {
    res = await createProject(project);
  }

  return res;
}

Last step, we update our index.js to call this new function:

require("dotenv").config();

const qoveryClient = require("./src/apis/qovery");
const notionClient = require("./src/apis/notion");

const refreshNotionProjects = async (projectsList) => {
  await Promise.all(projectsList.map((project) => (
    notionClient.createOrUpdateProject(project)
  )))
}

qoveryClient.listProjects()
  .then(async (projects) => await refreshNotionProjects(projects))
  .catch((e) => console.log("ERROR", e.message));

Before rerunning the program, let's delete all the entries from our Notion database. Try running the program several times, no duplicates! Good. Go to the Qovery console and change the name and description for one of your projects. Rerun the program, and like magic, your changes are reflected on Notion.

We are not handling the case where a project is deleted in Qovery; otherwise, this article would be way too long, so I leave space for your creativity.

List Applications

Our project gallery looks fantastic but is not very useful at the moment. What we want is to see our applications and their statuses. Qovery has a three levels hierarchy:

Project: which would typically correspond to one of your applications, including all services and their dependencies, like databases.
Environment: which allows you to deploy separate instances of your applications with different settings. For example, staging and production.
Application: A service running on your Kubernetes cluster.

For our Notion dashboard, we prefer to have a list of all the applications running in a project at first glance. So getting all the applications will be a two-steps process:

Retrieve all the environments for a project.
List all the applications for each environment.

First, we need to list the environments in a project. This one is pretty straightforward. In qovery.js add:

const listEnvironments = async (projectID) => {
  const res = await qoveryClient.get(`/project/${projectID}/environment`);

  return res.data.results.map(({ id, name }) => ({
    id,
    name,
  }));
};

Then to list all the applications in an environment. Very similar to the previous one:

const listApplications = async (environmentID) => {
  const res = await qoveryClient.get(
    `/environment/${environmentID}/application`
  );

  return res.data.results.map(({ id, name }) => ({
    id,
    name
  }));
};

Finally we create an exported function to return all the applications in a project:

exports.listAllApplications = async (projectID) => {
  const envs = await listEnvironments(projectID);
  const apps = [];

  for (env of envs) {
    const res = await listApplications(env.id);

    apps.push(
      res.map((app) => ({
        id: app.id,
        name: app.name,
        environment: {
          id: env.id,
          name: env.name
        },
        status: "unknown",
      }))
    );
  }

  return apps.flat();
};

Here we return all the applications for a project while conveniently shaping the application object. Note that for now, we hardcore the status. We'll get the actual application status later.

Add applications to Notion

Now that we can list our applications for a Qovery project let's add them to our Notion pages. The ideal would be to have a database with all applications on our projects pages. Unfortunately, there is no way to create an inline database on a page through the API at the time of writing. We can still make a child database that will appear as a link on our project page. (You'll be able to turn it inline through the UI).

To add this database to our project pages, update the createProject function in notion.js:

const createProject = async (project) => {
  const res = await notion.pages.create({
    parent: {
      type: "database_id",
      database_id: notionPageID,
    },
    cover: {
      type: "external",
      external: {
        url: `https://source.unsplash.com/random/900x700/?abstract,${project.id}`,
      },
    },
    properties: {
      Name: {
        title: [
          {
            text: {
              content: project.name,
            },
          },
        ],
      },
      "Qovery ID": {
        rich_text: [
          {
            text: {
              content: project.id,
            },
          },
        ],
      },
      Description: {
        rich_text: [
          {
            text: {
              content: project.description,
            },
          },
        ],
      },
    },
  });

  // ADDED PART
  await notion.databases.create({
    parent: {
      type: "page_id",
      page_id: res.id,
    },
    title: [{ type: "text", text: { content: "Applications List" } }],
    properties: {
      Name: {
        title: {},
      },
      Environment: {
        rich_text: {},
      },
      Status: {
        select: {
          options: [
            {
              name: "Not Deployed",
              color: "gray",
            },
            {
              name: "Running",
              color: "green",
            },
            {
              name: "Error",
              color: "red",
            },
            {
              name: "Deploying",
              color: "yellow",
            },
          ],
        },
      },
      "Qovery ID": {
        rich_text: {},
      },
    },
  });
  // END

  return res;
};

We're just creating a new database as a child of our project page. For the statuses, we use an arbitrary list convenient for us. We'll map the actual Qovery statuses and this list when we implement this part.

Delete your projects in Notion and relaunch your program.

Now let's fill that list, shall we?

We’ll start by creating a new createApplication function in notion.js:

const createApplication = async (projectID, application) => {
  const appsList = await getAppsList(projectID);

  const res = await notion.pages.create({
    parent: {
      type: "database_id",
      database_id: appsList.id,
    },
    properties: {
      Name: {
        title: [
          {
            text: {
              content: application.name,
            },
          },
        ],
      },
      Environment: {
        rich_text: [
          {
            text: {
              content: application.environment.name,
            },
          },
        ],
      },
      Status: {
        select: {
          name: application.status,
        },
      },
      "Qovery ID": {
        rich_text: [
          {
            text: {
              content: application.id,
            },
          },
        ],
      },
    },
  });

  return res.id;
};

This one is very similar to the createProject one, except for the properties. Except we need to get the Applications List database ID since we only have the projectID, which is just the parent page.

The getAppsList function looks like this:

const getAppsList = async (projectID) => {
  const res = await notion.blocks.children.list({
    block_id: projectID,
  });

  return res.results[0];
};

We retrieve all the children of our project page, and since the database is the only child, we return the first result.

Since we will want to update our applications as well instead of duplicating them, let’s create an updateApplication function:

const updateApplication = async (applicationID, application) => {
  const res = await notion.pages.update({
    page_id: applicationID,
    properties: {
      Name: {
        title: [
          {
            text: {
              content: application.name,
            },
          },
        ],
      },
      Environment: {
        rich_text: [
          {
            text: {
              content: application.environment.name,
            },
          },
        ],
      },
      Status: {
        select: {
          name: application.status,
        },
      },
    },
  });

  return res;
};

And a createOrUpdateApplication one:

exports.createOrUpdateApplication = async (projectID, application) => {
  let res;
  const notionApplication = await findApplicationByQoveryID(
    projectID,
    application.id
  );

  if (notionApplication) {
    res = await updateApplication(notionApplication.id, application);
  } else {
    res = await createApplication(projectID, application);
  }

  return res;
};

We need to implement findApplicationByQoveryID as well:

const findApplicationByQoveryID = async (projectID, qoveryID) => {
  const appsList = await getAppsList(projectID);

  res = await notion.databases.query({
    database_id: appsList.id,
    filter: {
      property: "Qovery ID",
      text: {
        equals: qoveryID,
      },
    },
  });

  return res.results[0];
};

For the same reason as with createApplication, we need to retrieve our Applications List database ID, hence another call to getAppsList.

Ok. Let's wire this up and check if it works. We’ll rewrite our index.js to match our latest changes:

require("dotenv").config();

const qoveryClient = require("./src/apis/qovery");
const notionClient = require("./src/apis/notion");

const refreshNotion = async () => {
  const projects = await qoveryClient.listProjects();

  for (project of projects) {
    const notionProject = await notionClient.createOrUpdateProject(project);
    const apps = await qoveryClient.listAllApplications(project.id);

    for (app of apps) {
      await notionClient.createOrUpdateApplication(notionProject.id, app)
    }
  }
}

refreshNotion()
  .then(async => console.log("SUCCESS", "Notion has been refreshed"))
  .catch((e) => console.log("ERROR", e.message));

It should refresh all the projects and applications every time we launch our program. Give it a try. You should see your applications appear in your Application List databases.

Get the actual status of the applications

Right now, all the applications appear to have the status Not Deployed because we hardcoded it. Let's get the proper status from Qovery. According to the Qovery API documentation, here are the possible statuses:

"INITIALIZED" "BUILDING_QUEUED" "BUILDING" "BUILD_ERROR" "BUILT" "DEPLOYMENT_QUEUED" "DEPLOYING" "DEPLOYMENT_ERROR" "DEPLOYED" "STOP_QUEUED" "STOPPING" "STOP_ERROR" "STOPPED" "DELETE_QUEUED" "DELETING" "DELETE_ERROR" "DELETED" "RUNNING" "RUNNING_ERROR" "CANCEL_QUEUED" "CANCELLING" "CANCEL_ERROR" "CANCELLED"

We'll map them to the four statuses we defined for our Notion dashboard.

In qovery.js add a getApplicationStatus function:

const getApplicationStatus = async (applicationID) => {
  const res = await qoveryClient.get(`application/${applicationID}/status`);
  const qoveryState = res.data.state;
  let state;

  switch (qoveryState) {
    case "INITIALIZED":
    case "STOP_QUEUED":
    case "STOPPING":
    case "STOPPED":    
    case "DELETE_QUEUED":     
    case "DELETING":
    case "DELETED":    
    case "CANCEL_QUEUED":     
    case "CANCELLING":
    case "CANCELLED":
      state = "Not Deployed";
      break;            
    case "BUILDING_QUEUED":
    case "BUILDING":
    case "DEPLOYMENT_QUEUED":
    case "DEPLOYING":
    case "BUILT":
      state = "Deploying";
      break;      
    case "BUILD_ERROR":
      state = "Error";
      break;      
    case "DEPLOYMENT_ERROR":
    case "STOP_ERROR":
    case "RUNNING_ERROR":  
    case "DELETE_ERROR":
    case "CANCEL_ERROR":
      state = "Error";
      break;            
    case "DEPLOYED":
    case "RUNNING":
      state = "Running";
      break;            
  }

  return state;
}

Since we over-simplified the status, some mappings might not be accurate. You can tweak this list to something that suits you better.

Now we update the listAllApplications functions to use the actual status:

exports.listAllApplications = async (projectID) => {
  const envs = await listEnvironments(projectID);
  const apps = [];

  for (env of envs) {
    const res = await listApplications(env.id);

    apps.push(
      await Promise.all(res.map(async (app) => {
        const appStatus = await getApplicationStatus(app.id)

        return {
          id: app.id,
          name: app.name,
          environment: {
            id: env.id,
            name: env.name
          },
          status: appStatus,
        };
      })
    ));
  }

  return apps.flat();
};

And we should be done.

Rerun your program, and you should see your applications statuses change to reflect their actual state on Qovery. You can try to launch a redeploy on the Qovery console, then run your program, and you will see the statuses change again.

Conclusion

Congratulations, and thanks for having read this far. We achieved a lot this time. We now have made Notion reflect the actual state of our Qovery account. In the next part, we'll make it possible to launch the redeploy of Qovery applications from our Notion dashboard.

NotionOps - Part 1: Presentation and project setup

Yann IRBAH — Mon, 14 Feb 2022 13:46:01 +0000

In the past few years, we saw the rise of an "EverythingOps" trend: DevOps, ChatOps, GitOps, AIOps ...

At the same time, Notion has become one of the most popular productivity tools. From knowledge base to CRM, the possibilities seem endless.
On the other hand, PaaS are evolving, and a new generation of developers platforms is emerging, like Qovery.

So what if we could manage our applications deployments directly from Notion, using Qovery?

The Project

Notion released their API last year, opening the door to a wide range of new possibilities. Since they did, I started thinking about all the fun things I could do with it. (Yes, Notion has become an un-productivity tool to me).

On the other hand, I also have an unhealthy obsession with Kubernetes and cloud platforms.
Since Qovery has a pretty powerful API, allowing us to quickly automate applications deployment on Kubernetes, I was curious to see how far we could integrate both.

This tutorial will show you how to integrate Qovery and Notion to directly manage application deployments on a Kubernetes cluster from our Notion workspace and see how far we can go.

So if you would like to be part of the next big thing, a.k.a. NotionOps, follow me, and let's do it.

Will it be useful? Probably not, but you will still learn things about Notion and Qovery APIs.

Will it be fun? Absolutely!

Prerequisites

To follow along with this tutorial, you will need:

A Qovery account with a cluster ready and some familiarities with Qovery
The Qovery CLI installed on your machine
A Notion account and some familiarities with Notion
Node.js 16 + yarn

Project Setup

Let's first create a simple Node project:

mkdir notion-ops
cd notion-ops
yarn init

You can leave the default and press enter for all the options.

Create an index.js file at the root of the project, with the following content:

console.log("Hello World!");

Now edit your package.json file, and add a script to launch your program with yarn. It should look like the following:

{
  "name": "notion-ops",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "start": "node index"
  },  
}

Run the following command:

yarn index

If you see the greeting message, the setup is done.
Now let's get to the exciting stuff.

Connect to the Qovery API

Get a Qovery API token

The first thing we need to do is connect to the Qovery API.

You can find the API documentation here: https://api-doc.qovery.com

The first thing we'll need to do is grab an API token. At the time of writing, the only way to get an API token is through the API itself. It will be added to the console soon.

First, grab your temporary token the following way:

qovery auth
cat ~/.qovery/context.json | jq -r .access_token

If you don't have jq installed, you should because it's a handy tool to manipulate JSON. Otherwise, you can just skip the | jq part and copy the access_token from the JSON output.

Now you need to get your Qovery organization ID. Go to the Qovery console and copy it from the URL in your browser. It will look something like this:
https://console.qovery.com/platform/organization/<ORGANIZATION_ID>/...

The token you got previously expires quickly. Unless you want to refresh it every hour, it's better to get a longer-lived API token:

export QOVERY_TOKEN=<YOUR_TEMPORARY_TOKEN>
export QOVERY_ORGANIZATION=<YOUR_ORGANIZATION_ID>

curl -v -X POST -H "Content-Type: application/json" \
  -H "Authorization: Bearer $QOVERY_TOKEN" \
   https://api.qovery.com/organization/$QOVERY_ORGANIZATION/apiToken

You should get a JWT token out of this call.

Prepare to make API calls

We'll use axios to make API calls. Add it to your project dependencies:

yarn add axios

Since we don't want to hardcode our API token and other settings, we'll use environment variables instead, using dotenv:

yarn add dotenv

Finally, create a .env file at the root of your project, with the following content:

QOVERY_API_TOKEN=<YOUR_API_TOKEN>
QOVERY_ORGANIZATION_ID=<YOUR_ORGANIZATION_ID>

Query the Qovery API

Now we are ready to call the Qovery API from our Node application. We will implement a simple call to get all the projects in our organization. If you've got none, you should create one.
At this point, it doesn't need to have environments and applications.

Add an src/apis folder at the root of your projects, and create a qovery.js file:

const axios = require('axios');

const qoveryAPIToken = process.env.QOVERY_API_TOKEN;
const qoveryOrganizationID = process.env.QOVERY_ORGANIZATION_ID;

const qoveryClient = axios.create({
  baseURL: 'https://api.qovery.com',
  headers: {'Authorization': 'Bearer ' + qoveryAPIToken}
});

exports.listProjects = async () => {
  const res = await qoveryClient.get(`/organization/${qoveryOrganizationID}/project`);

  return res.data.results.map(({id, name, description}) =>(
    {
      id,
      name,
      description
    }
  ));
}

We'll put all the calls to the Qovery API in this file.
We first require axios, the library we'll use to make HTTP requests to the API.

Then, we read the values we defined in our .env file.
We initialize an HTTP client with basic settings to query the API.
Finally, we export a method for reading projects from the Qovery API, and we filter only the keys we are interested in before returning the result.

Edit your index.js file so it looks like this:

require("dotenv").config();
const qoveryClient = require("./src/apis/qovery");

qoveryClient.listProjects()
  .then((projects) => console.log("QOVERY PROJECTS:", projects))
  .catch((e) => console.log("ERROR:", e.message));

The first line requires dotenv and loads the content of the .env files into the environment, so we can access the variables using process.env.MY_VARIABLE
We call our listProjects() function and log the results.

Run your yarn start script, you should get an output similar to this one:

QOVERY PROJECTS: [
  {
    id: '5c006cc1-f14e-46bf-955b-87b976a9bb14',
    name: 'My Project',
    description: 'A sample Qovery project'
  }
]

Congratulation, you can query the Qovery API.

Connect to the Notion API

Now it's time to connect to the Notion API. The process is a little more involved but fear not, it's still quite easy.

Create a Notion integration

Go to https://www.notion.so/my-integrations.
Click on New integration.
Give it a meaningful name like NotionOps With Qovery.
Select the workspace you would like this integration to take place in. You must have the right to add integrations to this workspace.
You can leave the defaults for the Content capabilities and select No user information for User capabilities since we won't need them.

Click Submit. You will be redirected to your integration page. Copy the secret token and add it to your .env file.

QOVERY_API_TOKEN=<YOUR_API_TOKEN>
QOVERY_ORGANIZATION_ID=<YOUR_ORGANIZATION_ID>
NOTION_INTEGRATION_TOKEN=<YOUR_NOTION_INTEGRATION_TOKEN>

Create a Notion page and share it with the integration

Next, we'll create a sample page to test our Notion integration. Create a new page at the root of your workspace and name it NotionOps.

On the top right corner of your page, click on the Share button, and share the page with your integration.

We'll also need the ID of the page. Click on Share then Copy link. You should get something like this: https://www.notion.so/<YOUR_WORKSPACE>/NotionOps-<PAGE_ID>.
Add the <PAGE_ID> part to your .env file:

QOVERY_API_TOKEN=<YOUR_API_TOKEN>
QOVERY_ORGANIZATION_ID=<YOUR_ORGANIZATION_ID>
NOTION_INTEGRATION_TOKEN=<YOUR_NOTION_INTEGRATION_TOKEN>
NOTION_PAGE_ID=<YOUR_NOTION_PAGE_ID>

It should be good. Let's write some code now.

Query the Notion API

You can find the API documentation for Notion here: https://developers.notion.com/reference/intro

Notion offers a JavaScript SDK to make our lives easier. Let's add it to our project:

yarn add @notionhq/client

Like we did for the Qovery API, add a new src/apis/notion.js file:

const { Client } = require("@notionhq/client");

const notion = new Client({ auth: process.env.NOTION_INTEGRATION_TOKEN });
const notionPageID = process.env.NOTION_PAGE_ID;

exports.getNotionPage = async () => {
  const response = await notion.pages.retrieve({ page_id: notionPageID });

  return response;
}

Require the Client from the Notion SDK.
Initialise the client with our integration token.
Export a function retrieving our page via the Notion API.

Edit the index.js file to call this new function:

require("dotenv").config();

const qoveryClient = require("./src/apis/qovery");
const notionClient = require("./src/apis/notion");

qoveryClient.listProjects()
  .then((projects) => console.log("QOVERY PROJECTS:", projects))
  .catch((e) => console.log("ERROR", e.message));

notionClient.getPage()
  .then((page) => console.log("NOTION PAGE:", page))
  .catch((e) => console.log("ERROR", e.message));

Rerun your program with yarn start. You should get an output similar to this one:

QOVERY PROJECTS: [
  {
    id: '5c006cc1-f14e-46bf-955b-87b976a9bb14',
    name: 'Demo Rails',
    description: ''
  }
]
NOTION PAGE: {
  object: 'page',
  id: 'fb7ac97a-4783-4b2f-91b4-9b0b3ddefce0',
  created_time: '2022-02-11T16:02:00.000Z',
  last_edited_time: '2022-02-11T16:22:00.000Z',
  cover: null,
  icon: null,
  parent: { type: 'workspace', workspace: true },
  archived: false,
  properties: { title: { id: 'title', type: 'title', title: [Array] } },
  url: 'https://www.notion.so/NotionOps-fb7ac97a47834b2f91b49b0b3ddefce0'
}

Conclusion

Congratulations, you now have successfully connected to both Notion and Qovery APIs.
In the next part of this tutorial, we'll read from the Qovery API to automatically create a dashboard in Notion, showing our projects, environments, and application with their running statuses. Stay tuned!