How to get CMS data model data for a Custom Register component?

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

What are you trying to accomplish
I have created a custom component ConnectorsBlock and add it in a Page. For this custom component, I want to fetch data that also lives in Builder in a CMS data model called Connector Item.
I was trying to use getAsyncProps to get connectors info in that page, but no luck so far.

Here is an example of my pages/connectors.tsx

import builder, { Builder, BuilderComponent } from "@builder.io/react";
import { getAsyncProps } from "@builder.io/utils";
import { GetStaticProps } from "next";
import dynamic from "next/dynamic";

import { getAllConnectors } from "cms/api";

const LazyConnectorsBlock = dynamic(async () => {
  return (await import("../components/ConnectorsBlock")).ConnectorsBlock;
});
export const getStaticProps: GetStaticProps = async () => {
  // const connectors = await getAllConnectors();
  const page = await builder
    .get("page", {
      userAttributes: {
        urlPath: "/connectors",
      },
    })
    .toPromise();

  await getAsyncProps(page, {
    async ConnectorsBlock(props) {
      return {
        connectors: await getAllConnectors(),
      };
    },
  });

  return {
    props: {
      page,
    },
    revalidate: 5,
  };
};

const Connectors = ({ page }) => {
  return (
    <>
      <header>
        <nav>Navbar</nav>
      </header>
      <BuilderComponent model="page" content={page} />
      <footer>Footer</footer>
    </>
  );
};

export default Connectors;

Builder.registerComponent(LazyConnectorsBlock, {
  name: "ConnectorsBlock",
  image:
    "https://tabler-icons.io/static/tabler-icons/icons-png/3d-cube-sphere-off.png",
});

Screenshots or video link

Code stack you are integrating Builder with
Nextjs

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

I’ve found this way but not sure if it’s the best way to solve it.

Hi @letiescanciano,

For getting data to custom components, I recommend you check out Connecting dynamic data in Builder’s Visual Editor and Custom Builder React component that needs Redux data.

Let us know if you have any further questions. Thank you!

Thanks a lot Manish.

For reference, I was able to solve it like this:

const LazyConnectorsBlock = dynamic(async () => {
  return (await import("../components/ConnectorsBlock")).ConnectorsBlock;
});
export const getStaticProps: GetStaticProps = async () => {
  const page = await getPage("connectors");
  const connectors = await getAllConnectors();

  return {
    props: {
      page,
      connectors,
    },
    revalidate: 5,
  };
};

const Connectors = ({
  page,
  connectors,
}: {
  page: BuilderElement;
  connectors: ConnectorModel[];
}) => {
  return (
    <>
      <header>
        <nav>Navbar</nav>
      </header>
      <BuilderComponent model="page" content={page} data={{ connectors }} />
      <footer>Footer</footer>
    </>
  );
};

export default Connectors;

Builder.registerComponent(LazyConnectorsBlock, {
  name: "ConnectorsBlock",
  image:
    "https://tabler-icons.io/static/tabler-icons/icons-png/3d-cube-sphere-off.png",
});

1 Like