Get a list of posts in a databse on Notion and parse it to the 11ty.

👉 Official Notion Developers site. 👉 11ty & Nunjucks

Follow Step 1 & Step 2 in this official tutorial. Note that, we don't use @notionhq/client, so you don't have to install it. Instead, install following packages,

npm install -D @11ty/eleventy-fetch
npm install -D dotenv

Create an .env file on the project directory + add ".env" to .gitignore!

NOTION_TOKEN="secret_cP45snd4S...nityXZ0xQq"
NOTION_DB_ID="67056f...a5d7522"
NOTION_VERSION="2022-06-28"

In your _data folder, create notion.js (or whatever you want).

const EleventyFetch = require("@11ty/eleventy-fetch");
require("dotenv").config();
const { get } = require("lodash");

module.exports = async function () {
  let url = `https://api.notion.com/v1/databases/${process.env.NOTION_TEST_ID}/query`;

  let json = await EleventyFetch(url, {
    duration: "1d",
    type: "json",
    fetchOptions: {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
        "Notion-Version": `${process.env.NOTION_VERSION}`,
        "Content-Type": "application/json",
      },
    },
  });

  json = json.results.map((post) => ({
    title: get(post, 'properties.Name.title[0].text.content', 'Untitled'),
  }));

  return {
    json,
  };
};

<aside> ⚠️ If you request the API within 1 day (duration: "1d" in the above codes), it keeps using the .cache and you may not see the newest changes from the API! In this case, you can remove .cache and try again!

</aside>

👉 Read more about @11ty/eleventy-fetch.

Go to the official API site for more use cases.

<aside> ☝ You can use Postman or any other API platform to try the queries from Notion API first.

</aside>

An example of the returned json (before the line json = json.),

{
  "object": "list",
  "results": [
    {
      // other fields....
      "properties": {
        // other fields....
        "Name": {
          // other fields....
          "title": [
            {
              // other fields....
              "text": {
                "content": "Testing 1",
                // other fields....
              },
              // other fields....
            }
          ]
        }
      },
      "url": "<https://www.notion.so/url-of-testing-1>"
    },
    {
      // other fields....
      "properties": {
        // other fields....
        "Name": {
          // other fields....
          "title": [
            {
              // other fields....
              "text": {
                "content": "Testing 2",
                // other fields....
              },
              // other fields....
            }
          ]
        }
      },
      "url": "<https://www.notion.so/url-of-testing-2>"
    },
  ],
  "next_cursor": null,
  "has_more": false,
  "type": "page",
  "page": {}
}

A return result will be stored in notion.json, you can use it in your template as {{ notion.json }}. Note that, the word "notion" is corresponding to the name of the file notion.js!

To show the list of titles from the returned json,

<div class="test-div">
  {% set notionPostTitles = notion.json %}
  {% for post in notionPostTitles %}
    <div>{{ post.title }}</div>
  {% endfor %}
</div>

The result will be,

<div class="test-div">
  <div>Testing 1</div>
  <div>Testing 2</div>
</div>