0

I'm pretty sure I'm using Asyncs and Awaits wrong. I don't understand why. Can anyone shed any light on why this doesn't work?

The error

Error: Error serializing `.posts[0]` returned from `getStaticProps` in "/notion".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.

The code for the page's NextJS static props function:

export async function getStaticProps() {

    const postsResponse = await fetch(
        `https://api.notion.com/v1/databases/${process.env.BLOG_DB}/query`, {
        headers: {
            Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
            "Notion-Version": `${process.env.NOTION_VERSION}`,
        },
        method: "POST",
    })

    const postsJSON = await postsResponse.json()

    const posts = postsJSON.results.map((post) => {

        const blocksResponse = await fetch(
                    `https://api.notion.com/v1/blocks/${post.id}/children`, {
                    headers: {
                        Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
                        "Notion-Version": `${process.env.NOTION_VERSION}`,
                    },
                    method: "GET",
                })
        
        const blocksJSON = await blocksResponse.json()

        const blocks = blocksJSON.results.map((block) => {
            return {
                id: block.id,
                type: block.type,
                text: block[block.type].text[0].plain_text,
                link: block[block.type].text[0].href,
            }
        })

        return {
            id: post.id,
            title: post.properties.Title.title[0].plain_text,
            tags: post.properties.Tags.multi_select.map(tag => tag.name),
            blocks: [],
        }
    });
    
    return {
        props: { posts }
    };
}

End goal is to fetch children blocks for each blog-post and return it all as an array.

[
  {
    post_id: "id of blog post",
    post_title: "title of blog post",
    children: [...] // the children of the item
  },
  {
    post_id: "id of blog post",
    post_title: "title of blog post",
    children: [...] // the children of the item
  }
]
Adib Kadir
  • 21
  • 3
  • Can you share the response type from ````https://api.notion.com/v1/databases/${process.env.BLOG_DB}/query```` API? – man.in.the.jukebox Sep 08 '22 at 15:36
  • For starters you're awaiting inside of a .map. You might be able to await postsJSON.results.map but that's kind of hit or miss depending on js engine. Basically the return of postsJSON.results.map is a promise, you're then accessing the return of getStaticProps and getting `Error serializing .posts[0] returned from getStaticProps` – b.stevens.photo Sep 08 '22 at 15:43
  • I would try making `posts` an array of promises, and calling Promise.all on it. Right now your map function is not async and uses await. – James Sep 08 '22 at 15:43
  • https://stackoverflow.com/questions/40140149/use-async-await-with-array-map – Yury Tarabanko Sep 08 '22 at 15:44
  • Thanks folks... making .map return a list of promises then using await promise.all worked for setting the posts! Love this community man! – Adib Kadir Sep 08 '22 at 16:21

0 Answers0