How to pass data object to Gen2 BuilderComponent

[tlee-pb]

Hello there,

Is there a data attribute in BuilderComponent, or Content in Gen2 SDK?

Builder content link

The page link is Vercel preview link with Gen2 SDK:

• Page URL: Page Link
• Builder URL: Builder Link

Builder public api key

• 1d8ecee591ac4358befb8fe998100548

What are you trying to accomplish
We are trying to move from Gen1 to Gen2 SDK to resolve our cache hit/miss and over cache write issues on Vercel, and encounter the data passing down the is undefined.

Screenshots or video link

Code stack you are integrating Builder with
NextJs, Gen2 SDEK

Reproducible code example

import { notFound } from 'next/navigation';

import PbContent from 'components/Builder';

import { getAllDetailPageModelSlugs, getAllDetails, getPostData } from 'utils/builder/builderSdkFunctions';

import type { Metadata } from 'next';

import renderMetadata from '@/utils/builder/renderMetaData';

type Params = {
  params: {
    slug?: string[];
  };
  searchParams: Record<string, string>;
};

export const generateMetadata = async ({ params }: Params): Promise<Metadata> => {
  const slug = params?.slug && Array.isArray(params?.slug) ? `/glossary/${params.slug.join('/')}` : '/glossary/';
  const seoData = await getPostData(slug, 'glossary-detail', 'data.seo');

  return renderMetadata(slug, seoData?.data?.seo);
};

export const generateStaticParams = async () => {
  const allPages = await getAllDetailPageModelSlugs('glossary-detail');
  const paths = allPages?.map(({ data }) => {
    const slugWithoutIntialPathSeperator = data?.url?.toString().substring(1);

    return {
      slug: slugWithoutIntialPathSeperator === '' ? [] : slugWithoutIntialPathSeperator.split('/'),
    };
  });

  return paths;
};

const GlossaryDetailPage = async ({ params, searchParams }: Params) => {
  const slug = params?.slug && Array.isArray(params?.slug) ? `/glossary/${params.slug.join('/')}` : '/glossary/';
  const pageDataPromise = getPostData(slug, 'glossary-detail');
  const allGlossaryPromise = getAllDetails('glossary-detail', { sort: { name: 1 } });

  const [pageData, allGlossary] = await Promise.all([pageDataPromise, allGlossaryPromise]);

  const isEditing = searchParams?.['__builder_editing__'] === 'true';

  if (!pageData && slug !== '/glossary/' && !isEditing) {
    return notFound();
  }

  const allGlossaryData = allGlossary?.filter(glossary => glossary.data.url !== '/glossary');
  console.log('All Glossary Detail:', allGlossaryData);

  return <PbContent model="glossary-detail" content={pageData} data={allGlossaryData} />;
};

export default GlossaryDetailPage

[manish-sharma]

Hello @tlee-pb,

In the Gen2 SDK, you indeed have a data attribute for the Content component, similar to the BuilderComponent in the Gen1 SDK. The data attribute can be used to pass additional data into your Builder content, which will be available in the Visual Editor and can be used for dynamic content rendering.

In your example, when utilizing the Gen2 SDK Content component, you should ensure to specify the model, apiKey, and content as required props, and you can optionally include data to pass any additional objects or state info that your Builder content might rely on.

Here’s a brief example of how you might use it:

<Content 
  model="glossary-detail"
  apiKey={YOUR_API_KEY}
  content={pageData}
  data={allGlossaryData} // passing additional data
/>

This usage assumes you are using the Content component from the Gen2 SDK. It’s recommended to verify your API key and that the Model and Content props are correctly set, ensuring the content is properly fetched and a valid JSON object is passed.

Thanks,