Get data from external APIs

Sometimes you need to fetch data from external sources and render it inside bricks.

For instance, when creating a headless commerce system, some product data might come from the headless platform, while other parts of the product details page are visually edited by the marketing team. This approach is also useful when dealing with legacy APIs containing product data sheets.

In React Bricks, you can fetch external data at two levels:

Within each brick that requires external data
At the page level, defined for each pageType

Use brick-level fetching when the data belongs to one brick and can be selected or configured from that brick. Use page-level fetching when multiple bricks on the same page need the same external data, such as a product record, event record, or customer profile.

Fetch external data in a brick

This is the most straightforward method, as each brick directly fetches the data it needs.

To fetch and use data from external APIs in a brick, define a getExternalData function in the brick’s schema. This async function returns a promise that resolves to an object, which is then merged with the brick’s props.

For more details, see the schema’s Connect external APIs documentation.

Example: fetch product data from a brick prop

import { Text, types } from 'react-bricks/rsc'

interface ProductPriceProps {
  sku: string
  title: types.TextValue
  price?: string
  availability?: string
}

const ProductPrice: types.Brick<ProductPriceProps> = ({
  title,
  price,
  availability,
}) => (
  <section>
    <Text
      propName="title"
      value={title}
      renderBlock={({ children }) => <h2>{children}</h2>}
      placeholder="Product title..."
    />
    {price && <p>{price}</p>}
    {availability && <p>{availability}</p>}
  </section>
)

ProductPrice.schema = {
  name: 'product-price',
  label: 'Product Price',
  getDefaultProps: () => ({
    sku: 'sku-123',
    title: 'Product title',
  }),
  getExternalData: async (_page, brickProps) => {
    const response = await fetch(
      `https://commerce.example.com/products/${brickProps?.sku}`
    )
    const product = await response.json()

    return {
      price: product.price.formatted,
      availability: product.availability,
    }
  },
  sideEditProps: [
    {
      name: 'sku',
      label: 'SKU',
      type: types.SideEditPropType.Text,
    },
  ],
}

export default ProductPrice

Fetch external data in pages

If multiple bricks need to access the same external data, it may be more efficient to fetch this data at the page level and then allow each brick to use the relevant portion of the data.

In this scenario, define getExternalData on the pageType. For bricks that need to access this data, add a mapExternalDataToProps function to their schema. This function maps the external data object on the page to an object that’s merged with the brick’s props.

For more information, refer to the Page Types documentation.

Example: fetch once at page type level

import { types } from 'react-bricks/rsc'

export const pageTypes: types.IPageType[] = [
  {
    name: 'product',
    pluralName: 'products',
    getExternalData: async (page) => {
      const productId = page.customValues?.productId

      if (!productId) {
        return {}
      }

      const response = await fetch(
        `https://commerce.example.com/products/${productId}`
      )
      const product = await response.json()

      return {
        product,
      }
    },
  },
]

Then each brick can pick the part of the page-level data it needs:

ProductHero.schema = {
  name: 'product-hero',
  label: 'Product Hero',
  mapExternalDataToProps: (externalData) => ({
    productName: externalData.product?.name,
    productImage: externalData.product?.image,
  }),
}