Building a Nextjs app with Notion as Headless CMS.
When i fetch the blocks, all of them work good except column_list
, which renders the column
children but not getting their content.
This is how i render the blocks:
export const getBlocks = async (blockId: string) => {
const blocks = [];
let cursor;
while (true) {
const { results, next_cursor }: any = await notion.blocks.children.list({
start_cursor: cursor,
block_id: blockId,
});
blocks.push(...results);
if (!next_cursor) {
break;
}
cursor = next_cursor;
}
return blocks;
};
... and then in getStaticProps i do this:
export const getStaticProps = async (context: any) => {
const { id } = context.params;
const blocks = await getBlocks(id);
// Retrieve block children for nested blocks (one level deep), for example toggle blocks
// https://developers.notion.com/docs/working-with-page-content#reading-nested-blocks
const childBlocks = await Promise.all(
blocks
.filter((block: any) => block.has_children)
.map(async (block: any) => {
return {
id: block.id,
children: await getBlocks(block.id),
};
})
);
const blocksWithChildren = blocks.map((block: any) => {
// Add child blocks if the block should contain children but none exists
if (block.has_children && !block[block.type].children) {
block[block.type]["children"] = childBlocks.find(
(x: any) => x.id === block.id
)?.children;
}
return block;
});
return {
props: {
blocks: blocksWithChildren,
},
revalidate: 1,
};
};
...so when i console.log("BLOCKSSS", blocks);
i get this:
As you see the column:{}
is empty even thought i have content on those 2 columns:
Any help would be appreciated!