How to get Magento 2 Page Builder content in PWA storefront

Page Builder used to create content using drag-and-drop built-in tools. It is the most powerful feature for developers, no need to do the coding which ultimately saves your time. You can review a preview of the content instantly, customize the text in the forms, add sliders and banners, and so many features are there. In short, Page Builder is a power pack Magento 2 extension.

To render the content added by Magento Page Builder in PWA Studio, there is a component RichContent is used. Let’s see how to get content and render in the storefront with the following example. We are creating a custom component:

Create a custom page route

File Path: src/targets/local-intercept.js
We are creating a custom static page for a page builder content demo.

module.exports = targets => {
    targets.of("@magento/venia-ui").routes.tap(routes => {
        routes.push({
            name: "MyPageBuilderDemo",
            pattern: "/pbcontent",
            path: require.resolve("../components/PBContentDemo/pBContentDemo.js")
        });
        return routes;
    });
});

Fetch CMS page using GraphQL

File Path: src/components/PBContentDemo/getCmsPage.gql.js
We are getting Magento CMS page data using GraphQL.

import { gql } from '@apollo/client';

export const CMS_PAGE_GQL = gql`
    query getCMSPage($identifier: String!) {
        cmsPage(identifier: $identifier) {
            identifier
            url_key
            title
            content
            content_heading
            page_layout
            meta_title
            meta_description
            meta_keywords
        }
    }
`;

Export custom component

File Path: src/components/PBContentDemo/index.js

export {default} from './pBContentDemo';

Render content in the storefront

File Path: src/components/PBContentDemo/pBContentDemo.js
We are loading GraphQL query to fetch Magento static page content and render that content using the RichContent component.

import React from "react";
import { useQuery } from '@apollo/client';
import RichContent from "@magento/venia-ui/lib/components/RichContent";
import {fullPageLoadingIndicator} from "@magento/venia-ui/lib/components/LoadingIndicator";
import ErrorView from "@magento/venia-ui/lib/components/ErrorView";
import {CMS_PAGE_GQL} from './getCmsPage.gql';

const PBContentDemo = () => {
    const { loading, error, data } = useQuery(CMS_PAGE_GQL, {
        variables: {
            identifier: "demo-page"
        },
        fetchPolicy: 'cache-and-network',
        nextFetchPolicy: 'cache-first'
    });

    if (!data) {
        if (loading) {
            return fullPageLoadingIndicator;
        }

        if (error) {
            return <ErrorView message={error.message} />;
        }
    }

    const cmsPage = data ? data.cmsPage : null;
    const cmsContent = cmsPage.content.length > 0 ? cmsPage.content : "";

    return (
        <RichContent html={cmsContent} />
    );
}

export default PBContentDemo;

Run storefront

yarn watch:example

Open the storefront URL and add /pbcontent at the end of the URL to load our custom page route. You can see your Magento static page content like the following screenshot.

We hope this blog may understandable and useful to you. You can email us at mage2developer@gmail.com if we missed anything or want to add any suggestions. We will respond to you as soon as possible. Happy to help 🙂