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!