Home App Docs Blog Github

Use model of type section into model of type data

Hi there, I’m trying to make a blog page of my website using builder and next.js for this I created a model of type data which has the field for my blogs, I use nextjs to fetch the data from the builder.io api. My question is I cant be able to add the builder visually created content on the page made by me by fetching the builder.io data. is there any way to add the custom code data and builder visually created content data on the same page.

I attached some screenshots too to tell what I want :


Builder content link

Builder public api key
fff8e6fa6fbc4f6abf4fb93c03e661f1

What are you trying to accomplish
I want to integrate the model of type section into model of type data so I can access the other models to fetch and show on my frontend

Code stack you are integrating Builder with
*e.g. NextJS, react

Hello @anupama.sharmaa!

If I am understanding correctly you have a Next.js page where you would like to import various builder content - namely a data model and section model. To do so, copy the Next.js code snippets from the Model Options page to fetch the builder content and use them in your page.

import { builder, BuilderComponent } from '@builder.io/react'

builder.init('YOUR_API_KEY')

builder.get('your-data-model').promise().then(({ data }) => {
  // Do something with the data
})

export const getStaticProps = async (context) => {
  const content = await builder.get('your-section-model', { url: context.resolvedUrl }).promise();

  return { 
    props: { content }, 
    revalidate: true,
    notFound: !content
  }
}

const YourPage = (props) => (
	return (
		<div>
		  <h1>Something from your data model</h1>
		  <BuilderComponent
		    content={props.content}
		    model="your-section-model" />
		</div>
	)
)

export default YourPage;

Additionally, with the visual editor you can pull in the fields from your data model entry into your section/page model entry by clicking on the Data tab > + Connect Data > Builder.io > Entry/Query. Then add data bindings to text, image, etc elements in your section/page to connect them to your blog fields.

1 Like

Yes definitely, you can extend any model (page or section) in builder with custom fields, so for your use case here, I’d create a section model - e.g blog-post - and add all those custom fields from your data model to it (no need for a separate data model for this). then you can read it in your code this way,

// in pages/posts/[slug].js
import { BuilderContent, BuilderComponent } from '@builder.io/react

// then in your exported component
     <BuilderContent
             content={post} // post here is the json from content api passed from getStaticProps or getServerSideProps
              model="blog-post"
            >
              {(data) => // notice the custom fields ( `title` , `image`, can be extended in model configuration )
                data && (
                  <article>
                    <Head>
                      <title>
                        {data.title} | My blog
                      </title>
                      <meta property="og:image" content={data.image} />
                    </Head>
                    <BuilderComponent model="blog-post" content={data} />
                  </article>
                )
              }
            </BuilderContent>
1 Like

Thanks for your quick response, but I want to know that If I create a custom field of type modal as I used above,
Will the response which i get by using builder.get() method includes the models too?

I’m not sure I understood the question, do you mean type Reference ? if so use the includeRefs option

const contentWithReferences = await builder.get('model-name', { includeRefs: true } )

// And in your component code
<BuilderComponent model="model-name" content={contentWithReferences} options={{ includeRefs: true }} />
1 Like

Thank you so so much for help sir. It really help me a lot to solve my problem.

1 Like