Get a list of posts in a databse on Notion and parse it to the 11ty.
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,1npm install -D @11ty/eleventy-fetch
2npm install -D dotenvCreate an
.env file on the project directory + add ".env" to .gitignore!1NOTION_TOKEN="secret_cP45snd4S...nityXZ0xQq"
2NOTION_DB_ID="67056f...a5d7522"
3NOTION_VERSION="2022-06-28"In your
_data folder, create notion.js (or whatever you want).1const EleventyFetch = require("@11ty/eleventy-fetch");
2require("dotenv").config();
3const { get } = require("lodash");
4
5module.exports = async function () {
6 let url = `https://api.notion.com/v1/databases/${process.env.NOTION_TEST_ID}/query`;
7
8 let json = await EleventyFetch(url, {
9 duration: "1d",
10 type: "json",
11 fetchOptions: {
12 method: "POST",
13 headers: {
14 Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
15 "Notion-Version": `${process.env.NOTION_VERSION}`,
16 "Content-Type": "application/json",
17 },
18 },
19 });
20
21 json = json.results.map((post) => ({
22 title: get(post, 'properties.Name.title[0].text.content', 'Untitled'),
23 }));
24
25 return {
26 json,
27 };
28};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!Go to the official API site for more use cases.
You can use Postman or any other API platform to try the queries from Notion API first.
An example of the returned json (before the line
json = json.),1{
2 "object": "list",
3 "results": [
4 {
5 // other fields....
6 "properties": {
7 // other fields....
8 "Name": {
9 // other fields....
10 "title": [
11 {
12 // other fields....
13 "text": {
14 "content": "Testing 1",
15 // other fields....
16 },
17 // other fields....
18 }
19 ]
20 }
21 },
22 "url": "<https://www.notion.so/url-of-testing-1>"
23 },
24 {
25 // other fields....
26 "properties": {
27 // other fields....
28 "Name": {
29 // other fields....
30 "title": [
31 {
32 // other fields....
33 "text": {
34 "content": "Testing 2",
35 // other fields....
36 },
37 // other fields....
38 }
39 ]
40 }
41 },
42 "url": "<https://www.notion.so/url-of-testing-2>"
43 },
44 ],
45 "next_cursor": null,
46 "has_more": false,
47 "type": "page",
48 "page": {}
49}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,
1<div class="test-div">
2 {% set notionPostTitles = notion.json %}
3 {% for post in notionPostTitles %}
4 <div>{{ post.title }}</div>
5 {% endfor %}
6</div>The result will be,
1<div class="test-div">
2 <div>Testing 1</div>
3 <div>Testing 2</div>
4</div>