SKNCRE 是一个虚构的化妆品品牌，销售昂贵的蜗牛黏液护肤品：面部精华液、面霜、眼霜和 SKNCRE 套装。在可组合电商中，您经常会看到产品信息存储在专业的管理系统（PIM）中，网站内容存储在 CMS 中，而购物车、结账、账户和支付等商务功能则存储在另一个系统（商务引擎）中。
在此示例中，所有页面、内容和媒体都存储在 Hygraph 中，但产品数据来自外部系统——在本例中，是一个名为 Federate This 的模拟 API。我们通过内容联邦（Content Federation）在 Hygraph 中公开数据。开发人员可以向 CMS 查询产品数据，而编辑人员可以在 CMS 内部使用这些数据，并像处理原生内容一样组合编辑原生内容和联邦内容。其优势在于，开发人员 和 内容编辑人员无需了解外部产品 API，因为他们可以直接通过 Hygraph 使用它。
此演示的架构具有高度可组合性，添加像 Commerce Layer 这样的系统来提供购物车和结账功能将相对容易。
克隆仓库，使用 npm install 安装依赖项，创建并填写 .env 文件，填入您的 API 端点（或从 .env.example 文件获取），然后使用 npm dev 运行应用程序。如果您不喜欢 Yarn，可以使用 yarn、 pnpm 或 bun 替代。
数据方面
如引言中所述，我们在此演示中将 Federate This 模拟数据 API 用于产品信息。我们使用内容联邦（Content Federation）将 Federate This 的 API 响应获取到 Hygraph 中，以便我们可以在 GraphQL API 中将其作为原生数据使用。
对于内容模型，我们在 CMS 中使用了广泛的功能，从表示页面的模型（page、pdp）到 productHighlight 模型，再到附加到页面模型以方便页面构建的 component 模式。在我们的 文档中了解更多关于 Hygraph 的 组件。
pdp 页面和 productHighlight 模型已连接到外部 Federate This 产品数据。通过这种方式，Hygraph 不拥有产品数据，而仅仅是提供服务，使外部系统完全自主。如果外部 API 数据发生变化，Hygraph 中的数据也会随之变化。Hygraph 从 CDN 边缘提供数据，您可以为缓存数据设置 TTL。
一个产品页面的模式，其中包含一个用于从 Federate This 端点选择产品的远程 GraphQL API 字段。
