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>