備忘録 – Notion APIをローカルのnodeから叩いてみよう

Notion API の ドキュメントの導入に書かれている内容を、Node.js / npm 初心者がやってみた備忘録です！

Notion側の準備

• データベースの準備
• API認証情報の準備

データベースの準備

新規のデータベースを適当に作ります。

データの列の名前を後で使うので「Name」として設定しておきます。

そして、作成したテーブルのURLの、データベースIDをコピーしてメモしておきます。

https://www.notion.so/[この部分の英数字がデータベースID]?v=[この部分はいらない]

API認証情報の準備

https://www.notion.so/my-integrations から新しいインテグレーションを作ります。

作成したら、トークンをコピーしてメモしておきます。

PC側の準備

• Node.jsが入っているか確認

node -v

Node.js がインストールされていない場合は https://nodejs.org/ja/ からLTSをインストールします。

APIを叩いてみる

https://developers.notion.com/docs を参考に、しつつ下記のようなファイルを用意します。

ドキュメントには .envの使い方が書いていないのですが、.index.jsに直接トークンを書かずに .envを使う想定でドキュメントが書かれているようだったので.envを使ってみます。

NOTION_KEY=[トークンをここに書きます]
NOTION_DATABASE_ID=[データベースIDをここに書きます]

{
  "name": "notion",
  "type": "module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "@notionhq/client": "^1.0.1",
    "dotenv": "^16.0.0"
  } 
}

import 'dotenv/config'
import { Client } from "@notionhq/client"

const notion = new Client({ auth: process.env.NOTION_KEY })

const databaseId = process.env.NOTION_DATABASE_ID

async function addItem(text) {
  try {
    const response = await notion.pages.create({
      parent: { database_id: databaseId },
      properties: {
        Name: { 
          title:[
            {
              "text": {
                "content": text
              }
            }
          ]
        }
      },
    })
    console.log(response)
    console.log("Success! Entry added.")
  } catch (error) {
    console.error(error.body)
  }
}

addItem("Yurts in Big Sur, California")

※ index.js の properties の後に出てくる Name という文字ですが、これはデータベースの列の名前に合わせます。

↓こんな感じにファイルを作成したら

任意のフォルダ
├.env
├index.js
├package.json
├package-lock.json

このフォルダ上で下記の2つのコマンドを実行します。

npm install
node index.js

うまくいけば↓このようなメッセージが帰ってきて

{
  object: 'page',
  id: '************************',
  created_time: '2022-04-02T11:13:00.000Z',
  last_edited_time: '2022-04-02T11:13:00.000Z',
  created_by: { object: 'user', id: '******************************' },
  last_edited_by: { object: 'user', id: '******************************' },
  cover: null,
  icon: null,
  parent: {
    type: 'database_id',
    database_id: '*********************************'
  archived: false,
  properties: {
    'タグ': { id: '******', type: 'multi_select', multi_select: [] },
    Name: { id: 'title', type: 'title', title: [Array] }
  url: 'https://www.notion.so/***************************************'
}
Success! Entry added.

Notion側の項目が増えます！

うまくいかないとき

うまくいかないときはこんな感じのメッセージが帰ってきます。（これはトークンの指定が間違っていた時）

@notionhq/client warn: request fail { code: 'unauthorized', message: 'API token is invalid.' }
{"object":"error","status":401,"code":"unauthorized","message":"API token is invalid."}

おそらく下記のいずれかの原因なので、指定を見直す必要があります。

• トークンの指定がうまくいっていない
• データベースIDの指定がうまくいっていない
• 列の名前の指定がうまくいっていない

サーバーで動かせるのか？

jsなので「webpack等で適切にバンドルしてhtmlで読み込んで、サーバーアップしたらブラウザで動かせるのでは」と考えて試してみたのですが、Notion APIは基本的にはブラウザからJavaScriptでたたくことはできないようです。

Access to fetch at 'https://api.notion.com/v1/pages' from origin 'https://deep-space.blue' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

※いろいろな対策をして使う方法もなくはないようですが…