Registering a component with a dynamic data or by passing a variable

[idy]

Hello,
how could I add to an inputs or to the inputs array a data coming from an api? Something similar to this:

I have done a lot of tests and probably the code is wrong.
Best regards and thank you very much.

[garima]

Hi @idy, Welcome to the Builder.io Forum!

Your attempt to use the getAsyncProps function directly within the inputs array is incorrect and needs to be modified. Instead, you should use getAsyncProps within the server-side or static generation methods, such as getStaticProps .Here’s how you can properly register a component that fetches data asynchronously using getAsyncProps:

import { Builder } from '@builder.io/react';
import dynamic from 'next/dynamic';

// Import your component dynamically
const MyAsyncComponent = dynamic(() => import('./components/MyAsyncComponent'));

Builder.registerComponent(MyAsyncComponent, {
  name: 'MyAsyncComponent',
  inputs: [
    {
      name: 'items',
      type: 'list',
      defaultValue: [],
      // any additional input settings
    },
  ],
});

2. Fetch Data Asynchronously using getAsyncProps

import { getAsyncProps } from '@builder.io/utils';
import { builder } from '@builder.io/react';

builder.init('YOUR_API_KEY'); // Make sure to replace this with your actual API key

export async function getStaticProps() {
  const content = await builder
    .get('your-model-name', {
      url: '/your-url-path',
    })
    .toPromise();

  await getAsyncProps(content, {
    async MyAsyncComponent(props) {
      const data = await fetchData(); // Replace this with your actual data fetching logic
      return {
        items: data.items,
      };
    },
  });

  return { props: { content } };
}

For more details on how to fetch data asynchronously and register components, refer to the documentation on registering custom components, and using getAsyncProps.