react-router-relay是否与Relay模式不一致？-Java 学习之路

我正在项目中使用react-router-relay . 鉴于每个组件基本上都有一个与根查询同名的片段，因此设计似乎不合适 . 每个组件是否应该能够在根查询下具有任意类型的唯一命名片段？这可能是使用这个包，还是我的想法有缺陷？

Edit: 也许我的问题有点模糊 . 我的问题是，反应路由器中继定义的查询属性基本上有两个规则强制执行我认为是一个奇怪的设计模式 . 这两条规则是：

每个查询只能"one level"深 .
每个查询必须映射到使用它的组件上具有相同名称的片段 .

这将为您留下一个场景，您可以：

对每个组件使用相同的"viewer"查询，并在每个组件上定义一个互补的"viewer"片段 . 这些片段都会定义不同的数据要求，尽管它们具有相同的名称，这看起来非常令人困惑 .
您为不同的组件创建唯一的片段名称，然后根据您要获取的数据类型重复使用不同名称的完全相同的根查询，这看起来非常愚蠢 .

1 回答

1
好问题 . 当您处理Relay时，您认为每个组件都应该有自己的片段，以便查询本身可以精确映射到该特定组件所需的数据 . 然而，片段的命名可能是你喜欢它们命名的，但是类型不能是任意的 . 它必须是Root Query对象下面的声明类型（或者您要将片段附加到的任何字段） . 否则，该片段将抛出一个错误，指出您无法在Query或字段上查询该类型 .

例如：
```
var componentOneFragment = Relay.QL`
    fragment on User {
        name
    }
`;
```
这里需要注意的一点是，您不需要为 fragment userFragment on User { ... } 等片段命名 . 通过声明 ${Component.getFragment(componentOneFragment)} ，从路由器中的Relay查询动态引用组件片段时，这将为您提供更大的灵活性 . 希望这可以帮助！

EDIT:

对每个组件使用相同的“查看器”查询，并在每个组件上定义一个免费的“查看器”片段 . 这些片段都会定义不同的数据要求，尽管它们具有相同的名称，这看起来非常令人困惑 .

虽然碎片的相同名称可能看起来令人困惑，但这是思考问题的最佳方式 . 每个组件确实具有不同的数据要求，因此它们的Relay容器自然会有不同的片段，但仍然在相同的片段名称下 .

此片段可能包含在需要 User 数据的其中一个中继容器中：
```
const WidgetList = Relay.createContainer(/* ... */, {
  initialVariables: {
    color: null,
    size: null,
    limit: null
  },

  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        widgets(color: $color, size: $size, first: $limit) {
          edges {
            node {
              name,
            },
          },
        },
      }
    `
  }
});
```
虽然这个片段（名称仍然相同）可能包含在另一个需要Widget数据的Relay容器中：
```
const ActionsList = Relay.createContainer(/* ... */, {
  initialVariables: {
    input: null
  },

  fragments: {
    viewer: () => Relay.QL`
      fragment on Widget {
        actions(input: $input) {
          edges {
            node {
              name,
            },
          },
        },
      }
    `
  }
});
```
只要 User 和 Widget 都是根查询对象下的类型，这些都可以在同一个GraphQL查询中动态使用（即 $Component.getFragment('viewer') ） .
回复于 2024-05-09T10:55:19+08:00

react-router-relay是否与Relay模式不一致？

1 回答

相关问题