Dynamic external API calls with URL slug / search params not working

Technical Questions
, ,
1

Builder content link

Builder public api key
582def2244ac4cc8b2a83a53c64e1d09

What are you trying to accomplish
I want to have dynamic pages with dynamic external API data.

I build some dynamic route in nextjs:

/assetview/[articleName]/page.tsx

I created a section with the builder content and when rendering I send the article name as data.

return (
<BuilderComponent
model=“asset-description”
data={{ articleName }}
/>
);

I set the preview URL in builder.io to “…/assetview/C-100-1”

In builder editor I can open the component and insert some text field.
When I do data bindings on state.aricleName with type text. I can see: “C-100-1” displayed in the text field.

So the props are getting injected correctly in the page.

So far so good. I can see and use my articleName as state in the section.

Problem starts here

Now I want to query my external Datasource with the articleName:

image

https://…/assets/{{state.articleName}}

Now some weird things happen. At first nothing happens.
If I manually enter in the external API field:

https://…/assets/C-100-1

I can query the data and my state gets the new fields.

So some kind of state caching happens in the builder visual editor. I couldn’t find a way to reset the state here. Which is really weird if you add some data fields and remove them again. A state clear button would be nice to reproduce the issue initially.

So after the query this is my state:

{
“asset_id”: “C-100-1”,
“identification”: “…”,
“id”: “…”,
“product_id”: “…”,
“product_name”: “…”,
“product_description”: “…”,
“size”: …,
“color”: …
}

If I switch back to:
https://…/assets/{{state.articleName}}

The state gets updated now for every slug.
So if I change the url part in the visual editor I get the correct data for the slug.

Cool. But only in the visual editor - not when clicking on preview.
In preview mode undefined is sent as state.articleName:

2024-09-13T08:11:53.031Z - LOG: Asset Product API was called with findOne for undefined

In the visual editor I sends 4 calls:

2024-09-13T08:12:30.207Z - LOG: Asset Product API was called with findOne for C-100-1
2024-09-13T08:12:30.252Z - LOG: Asset Product API was called with findOne for C-100-1
2024-09-13T08:12:30.325Z - LOG: Asset Product API was called with findOne for {{state.articleName}}
2024-09-13T08:12:30.618Z - LOG: Asset Product API was called with findOne for undefined

I think this is like development mode like react strict mode or something.

So 4 renders happen and the data get send which leads to rerendering and fetching the correct data.

My guess is, that the inital state is set on the component after the API call runs.

Site loads - API call runs with undefined, state is set later - api call dosen’t run with new state.

How can I work this around?

I also tried with searchparams instead of route slugs and have similar issues.
I even tried to extract the searchparams in builder as well as mentioned here:

Code stack you are integrating Builder with
NextJS, Nestjs API

Reproducible code example

This is the basic code:

"use client";
import { BuilderComponent, builder } from "@builder.io/react";

export default function ProductPage({
  params,
}: {
  params: { articleName: string };
}) {
  builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);
  const { articleName } = params;

  console.log("🚀 articleName", articleName);

  return (
    <BuilderComponent
      model="asset-description"
      data={{ articleName }} // {{state.articleName}} is set in builder
    />
  );
}

Thanks four your help!

Best regards,

Andreas