是否可以从联合模块传播 Relay Modern 片段？

编程问答 2022-05-14

问题描述

我正在试验具有模块联合和 Relay Modern 的微前端 (MFE) 架构。我的目标是在允许联合 UI 组件的同时最大限度地减少 API 调用的数量（Relay 提供的内容）。

该应用程序应如下所示：

enter image description here

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

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

CartButton_cart_Fragment 在哪里

fragment CartButton_cart_Fragment on Query {
  carts {
    itemCount
  }
}

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

  • Shell：托管导航栏
  • 产品：公开 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 结合使用？这（传播联邦片段）目前在技术上可行吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）