0

我正在使用 Module Federation 和 Relay Modern 试验微前端 (MFE) 架构。我的目标是在允许联合 UI 组件的同时尽量减少 API 调用的数量（Relay 提供的）。

该应用程序应如下所示： 在此处输入图像描述

在非联合应用程序中，我可以在根查询中传播片段：

query App_root_Query {
  ...CartButton_cart_Fragment
  ...ProductList_products_Fragment
}

CartButton_cart_Fragment在哪里

fragment CartButton_cart_Fragment on Query {
  carts {
    itemCount
  }
}

通过模块联合，组件被分发到 3 个应用程序：

  • Shell：托管导航栏
  • Products : 暴露ProductList组件
  • Cart : 暴露CartButton组件

这意味着根查询和片段也是分布式的。现在中继编译器给出错误：

ERROR:
- Unknown fragment 'CartButton_cart_Fragment'.
  
  App.js:3:8
  2 |   query App_root_Query {
  3 |     ...CartButton_cart_Fragment
    |        ^
  4 |   }

我猜这是因为模块联合在 webpack 中工作，所以中继编译器没有必要的信息来解析片段。

目前，我发现的唯一工作方式是拥有CartButton并ProductList进行自己的查询。然而，想象一个有许多联合组件的页面，独立查询的数量有点违背了 Relay 的目的。

所以我想知道是否有人尝试过将 Relay Modern 与 Module Federation 结合使用？目前这（传播联合片段）在技术上可行吗？

4

0 回答 0