SKNCRE is a fictitious cosmetics brand selling costly snail slime skin care products: face serum, face cream, eye contour, and the SKNCRE bundle. What you often see in composable e-commerce is that the product information lives in a specialized management system (a PIM), the content of the website in a CMS, and commerce features such as a cart, checkout, account, and payments in yet another system (a commerce engine).
In this example, all pages, content, and media are stored in Hygraph, but the products come from an external system – in this case, a mock API called Federate This. We expose the data in Hygraph via Content Federation. Developers query the CMS for product data, while editors can use the data inside the CMS while they combine editing native and federated content as if it were the same. The beauty is that developers and content editors do not need to understand the external product API as they use it directly through Hygraph.
This demo’s architecture is highly composable, and it would be relatively easy to add a system like Commerce Layer to facilitate shopping cart and checkout functionality.
Clone the repository, install the dependencies with <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">npm install</code>, create and fill out the <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">.env</code> file with your API endpoint (or grab the one from the <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">.env.example</code> file), and run the app with <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">npm dev</code>. If you dislike Yarn, use <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">yarn</code>, <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">pnpm</code>, or <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">bun</code> instead.
The data side of things
As mentioned in the introduction, we are using the Federate This mock data API for the product information in this demo. We use Content Federation to fetch the API response of Federate This into Hygraph so we can use it as native data in the GraphQL API.
For the content model, we use a wide array of features in the CMS, from models that represent pages (<code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">page</code>, <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">pdp</code>) to a <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">productHighlight</code> model to <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">component</code> schemas attached to page models for easy page building. Learn more about Hygraph’s components in our documentation.
The <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">pdp</code> page and the <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">productHighlight</code> models have been connected to external Federate This product data. This way, Hygraph doesn’t own the product data but merely serves it, leaving the external system completely autonomous. If the external API data changes, it also changes in Hygraph. Hygraph serves the data from the CDN edge, and you can set a <code style="background-color: rgba(var(--bg-surface-2)/var(--tw-bg-opacity));">TTL</code> for the cached data.
<img src="https://media.graphassets.com/2PHxBUQxyDQ491jkSMSw" alt="The schema for a product page with a remote GraphQL API field for selecting a Product from the Federate This endpoint.">
The schema for a product page with a remote GraphQL API field for selecting a Product from the Federate This endpoint.