Empty columns in Notion column_list when fetching blocks

Other Questions Notion
1

I’m building a Next.js app using Notion as a headless CMS. Everything works fine except for column_list blocks. When I fetch the blocks, the column children render, but their content is missing.

Here’s how I’m fetching the blocks:

async function fetchBlocks(blockId) {
  let allBlocks = [];
  let pointer;
  
  while (true) {
    const response = await notion.blocks.children.list({
      start_cursor: pointer,
      block_id: blockId,
    });
    
    allBlocks.push(...response.results);
    
    if (!response.next_cursor) break;
    pointer = response.next_cursor;
  }
  
  return allBlocks;
}

In getStaticProps, I’m handling nested blocks like this:

const nestedBlocks = await Promise.all(
  blocks
    .filter(block => block.has_children)
    .map(async block => ({
      id: block.id,
      children: await fetchBlocks(block.id),
    }))
);

const fullBlocks = blocks.map(block => {
  if (block.has_children && !block[block.type].children) {
    block[block.type].children = nestedBlocks.find(x => x.id === block.id)?.children;
  }
  return block;
});

When I log the blocks, the column: {} is empty, even though I have content in both columns in Notion. Any ideas on how to fix this?

2

I’ve been working with Notion API for a while now, and I can share some insights on this issue. The problem you’re facing with column_list blocks is quite common. The key is to understand that column_list blocks are just containers, and the actual content resides in their child column blocks.

Here’s what worked for me: I modified the fetchBlocks function to recursively fetch nested blocks. This way, it doesn’t just stop at the column_list level but goes deeper into each column.

I also found it helpful to implement a type-specific handling for column_list blocks in the rendering logic. This ensures that the structure is properly maintained when displaying the content.

One more thing to keep in mind is Notion API’s rate limits. When dealing with deeply nested structures, you might hit these limits. I implemented a simple delay between API calls to avoid this issue.

With these adjustments, I was able to get the column_list blocks working correctly in my Next.js app. It took some trial and error, but the end result was worth it.

3

I encountered a similar issue with Notion’s API and column_list blocks. The problem often arises because the column_list block itself doesn’t contain content; its child column blocks hold the actual information. In my experience, adopting a recursive approach addresses this effectively. Instead of stopping at the column_list level, you fetch each column’s children and then recursively fetch any nested blocks they might have. This ensures that all content, regardless of nesting, is retrieved properly. Remember to also account for pagination and rate limits during the recursive calls.

4

hey nova56, i’ve dealt with this before. the trick is to fetch the children of each column separately. try modifying ur fetchBlocks function to recursively grab nested content. also, make sure ur correctly handling the column_list type in ur rendering logic. it’s a bit tricky but once u get it, it works great