How to add Symbol component to write API blocks?

Technical Questions
, ,
1

Hello,

Is it possible to add Symbol component with write api ?

this is how you add component, inside data.blocks

    const builderIoBlogData = {
      name: cleanHTML(post_title).trim(),
      data: {
        slug: post_name,
        type: typeLookUp[post_type],
        tags: tagIdsBuilderIoFormat,
        blocks: [
          {
            '@type': '@builder.io/sdk:Element',
            component: {
              name: BLOG_POST_COMPONENT_NAME,
              options: {
                title: cleanHTML(post_title).trim(),
                body: post_content_body,
                date: post_date,
                authors: authorIdsBuilderIoFormat,
              },
            },
          },
        ],
      },
    };

So if i have symbol component (let say top navigation) with the following data, is it possible to add it when creating content with the write api ?

  {
    '@type': '@builder.io/core:Reference',
    model: 'symbol',
    id: '2be27330f6384c6fa539b29d5d7f489a',
   },
2

Yes, you can add a Symbol component when creating content with the Write API. Symbols in Builder.io are reusable components or sections that can be used across multiple pages or entries. When using the Write API, you’ll reference the symbol by its model and ID just like any other component.

Below is an example that demonstrates how to include a symbol component, such as a top navigation bar, along with your custom blog post component in the blocks array of your content creation payload.

Here’s how you can structure your builderIoBlogData to include both your custom blog component and the symbol component:

const builderIoBlogData = {
  name: cleanHTML(post_title).trim(),
  data: {
    slug: post_name,
    type: typeLookUp[post_type],
    tags: tagIdsBuilderIoFormat,
    blocks: [
      {
        '@type': '@builder.io/core:Reference',
        model: 'symbol',
        id: '2be27330f6384c6fa539b29d5d7f489a', // Replace with your actual symbol ID
      },
      {
        '@type': '@builder.io/sdk:Element',
        component: {
          name: BLOG_POST_COMPONENT_NAME,
          options: {
            title: cleanHTML(post_title).trim(),
            body: post_content_body,
            date: post_date,
            authors: authorIdsBuilderIoFormat,
          },
        },
      },
    ],
  },
};

// Use the Write API to create the content with this data
// Example using fetch
fetch('https://builder.io/api/v1/write', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer YOUR_WRITE_API_KEY`, // Replace with your Write API key
  },
  body: JSON.stringify(builderIoBlogData),
})
  .then(response => response.json())
  .then(data => console.log('Content created successfully:', data))
  .catch((error) => console.error('Error creating content:', error));

Key Points:

  1. Symbol Reference: Include the symbol reference object inside the blocks array.
  2. Component Structure: Make sure the symbol reference is added in the correct format with @type, model, and id.
  3. Content Creation: Use the Write API endpoint to send your payload with the symbol and other components.

For more details, refer to the Builder.io Write API documentation.

If you haven’t done so already, you can also explore how to integrate symbols for a better understanding of their use cases and functionality.

3

@Stephane , Thanks for the answer, however, not quite working.

This was literally the first thing i tried, but after i create the content and open it in the builder io editor, i get this annoying error.


Error: Objects are not valid as a React child (found: object with keys {@type, id, model, value}). If you meant to render a collection of children, use an array instead.

image
image1401×429 29.5 KB

    const builderIoBlogData = {
      name: cleanHTML(post_title).trim(),
      data: {
        slug: post_name,
        type: typeLookUp[post_type],
        tags: tagIdsBuilderIoFormat,
        blocks: [
          {
            '@type': '@builder.io/core:Reference',
            model: 'symbol',
            id: '2be27330f6384c6fa539b29d5d7f489a',
          },
          {
            '@type': '@builder.io/sdk:Element',
            component: {
              name: BLOG_POST_COMPONENT_NAME,
              options: {
                title: cleanHTML(post_title).trim(),
                body: post_content_body,
                date: post_date,
                authors: authorIdsBuilderIoFormat,
                shortDescription: post_excerpt ? post_excerpt : '',
              },
            },
          },
        ],
      },
    };

The model name and the id are correct.

image
image861×223 12.6 KB

Tried with other symbols as well, same result.

It is worth mentioning that with the actual component the symbol is created from, works, but with the symbol itself does not.

4

@Stephane , Hi again.

Found the answer.

So to add a symbol when creating content with the builder write API you need to pass to the blocks this:
       {
            '@type': '@builder.io/sdk:Element',
            component: {
              name: 'Symbol',
              options: {
                symbol: {
                  entry: TOP_NAV_SYMBOL_ID,
                  model: 'symbol',
                },
              },
            },
         },
instead of this
   {
        '@type': '@builder.io/core:Reference',
        model: 'symbol',
        id: TOP_NAV_SYMBOL_ID, 
   },

COMPLETE EXAMPLE:

    const builderIoBlogData = {
      name: ENTITY_NAME,
      data: {
        slug: post_name,
        type: typeLookUp[post_type],
        tags: tagIdsBuilderIoFormat,
        blocks: [
          {
            '@type': '@builder.io/sdk:Element',
            component: {
              name: 'Symbol',
              options: {
                symbol: {
                  entry: TOP_NAV_SYMBOL_ID,
                  model: 'symbol',
                },
              },
            },
          },
          {
            '@type': '@builder.io/sdk:Element',
            component: {
              name: BLOG_POST_COMPONENT_NAME,
              options: {
                title: BLOG_TITLE,
                body: post_content_body,
                date: post_date,
                authors: authorIdsBuilderIoFormat,
                shortDescription: post_excerpt ? post_excerpt : '',
              },
            },
          },

          {
            '@type': '@builder.io/sdk:Element',
            component: {
              name: 'Symbol',
              options: {
                symbol: {
                  entry: BOTTOM_NAV_SYMBOL_ID,
                  model: 'symbol',
                },
              },
            },
          },
        ],
      },
    };
1 Like
5

Very cool @Mehan - Well done, I will take note of this as a future solution.
Thanks for the update and have a great weekend!