How to fetch data from Webflow CMS to react application

App Developers Developer APIs
1

I’ve used devlink and connected all the components from webflow to local host 3000. But for CMS it showing “This builtin is not currently supported: DynamoWrapper” error. How do I write the code for that?
Please help!

Here is my public share link: Webflow - Hotel website

(how to access public share link)

2

Hey there, I know it’s a late reply, but I’ve just stumbled upon this problem myself and thought I’d share how I solved it.

You need to use slots for this.

  1. In the parent component that contains the CMS list in Webflow, create a slot where that CMS list is.
  2. Now, in the synced React component, you can pass whatever you what you want to it, including a list of children.
  3. For the children, create components as well, with whatever props you need (these would correspond to the dynamic CMS attributes that each CMS listing item uses)
  4. In React, you need to bring the CMS data in some way, DevLink won’t do it for you - maybe export it from WF and import it into a headless CMS, or access it from WF via the API - your call)
  5. You can now loop through the CMS data in React, and pass the resulting JSX to the slot in the parent component.

Example: I have a footer component, and it needs to list a bunch of services the client offers, which are hosted in the CMS. Here’s the React code for it:

import {
  DevLinkProvider, // required for interactions
  Header,
  Footer,
  FooterServiceLink,
} from "@/devlink";

// the CMS data turned into JSON, exported as a default const from data/services.jsx
import servicesArray from "@/data/services";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {

 // iterate through all the services in the CMS data, and parse together the maktup that should sit in the slot of the footer component below
  const footerServicesMarkup = servicesArray.map((service, key) => {
    return (

      // use the component I created in WF for the services links, with props for link and text
      <FooterServiceLink
        key={key}
        link={{ href: service.Slug }}
        text={service.Name}
      />

    );
  });


  return (
    <html lang="en">
      <body>
        <DevLinkProvider>

         <Header />

         <div className="main-wrapper">{children}</div>

          <Footer servicesSlot={footerServicesMarkup} />

        </DevLinkProvider>
      </body>
    </html>
  );
}

Hope this helps!

2 Likes