Hi there, I’m new here,
I have some difficulties understanding what i’m doing wrong
I cloned the next-js-cmg-blog
, I have created a page model, i have registered a custom-component
that is supposed to show a list of 3 blog entries.
I’m passing the includeRefs: true
and also noTraverse: false
but for some reason, I get only the reference of the author I don’t get the data back.
here is the public key
28c86d257ef84bcaa27890cf709ef8f2
my dummy custom component
import PostCard from '@/components/post-card'
const custom = props => {
console.log(props.post)
return (
<>
<h1 className='my-heading text-3xl'>{props.title}</h1>
<div className='grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32'>
{props.post && (
<PostCard
intro={props.post.value.data.intro}
key={props.post.value.data.slug}
title={props.post.value.data.title}
coverImage={props.post.value.data.image}
author={props.post.value.data.author.value?.data}
slug={props.post.value.data.slug}
/>
)}
</div>
<pre>{JSON.stringify(props.post, null, 2)}</pre>
</>
)
}
export default custom
my _app.js
import '@/styles/index.css'
import { builder, Builder } from '@builder.io/react'
import dynamic from 'next/dynamic'
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY)
Builder.registerComponent(
dynamic(() => import('../components/Custom')),
{
name: 'Heading',
inputs: [
{ name: 'title', type: 'text', defaultValue: 'plm heading' },
{ name: 'post', type: 'reference', model: 'post' },
],
image: 'https://tabler-icons.io/static/tabler-icons/icons-png/3d-cube-sphere-off.png',
}
)
function MyApp ({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
and my page route handler [slug].js
import { builder, BuilderComponent } from '@builder.io/react'
builder.init('03c953a5d0924dd3af815f62dad8186d')
export const getStaticProps = async context => {
// Dynamically fetch latest content from Builder.io API, so you can publish updates without
// codebase changes
const content = await builder
.get('page', { url: '/mihai', includeRefs: true, noTraverse: false })
.promise()
return { props: { content } }
}
export async function getStaticPaths () {
const pages = await builder.getAll('page', {
fields: 'data.url',
options: {
noTargeting: true,
},
})
return {
paths: pages.map(page => `${page.data?.url}`),
fallback: true,
}
}
// View full integration options and docs here: https://builder.io/c/docs/developers
export default function MyCompoennt (props) {
return (
<BuilderComponent
content={props.content}
model='page'
options={{ includeRefs: true, options: { noTraverse: false } }}
/>
)
}
I would really appreciate it if someone can guide me in the right direction. it feels like I’m doing something wrong but can’t figure out what
I have played with the API:
if I request the blog-article with the flag includeRefs I get the author data:
https://cdn.builder.io/api/v2/content/post?apiKey=28c86d257ef84bcaa27890cf709ef8f2&includeRefs=true
if I request the page I don’t get it
https://cdn.builder.io/api/v2/content/page?apiKey=28c86d257ef84bcaa27890cf709ef8f2&userAttributes.urlPath=%2Fmihai&includeRefs=true