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 npm install, create and fill out the .env file with your API endpoint (or grab the one from the .env.example file), and run the app with npm dev. If you dislike Yarn, use yarn, pnpm, or bun 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 (page, pdp) to a productHighlight model to component schemas attached to page models for easy page building. Learn more about Hygraph’s components in our documentation.
The pdp page and the productHighlight 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 TTL for the cached data.
The schema for a product page with a remote GraphQL API field for selecting a Product from the Federate This endpoint.
Concluding
If you want a nice-looking demo that dips its toes into composable commerce with Hygraph and an external data source, this demo is for you. It’s been designed to be intuitive and highly composable, so adding a shopping cart and checkout would be relatively simple.
Do you have any questions, feedback, or comments? Please join our community!