Question

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

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

每个查询只能进入一个级别＆＃34;深。
每个查询必须映射到使用它的组件上具有相同名称的片段。

这将为您留下以下情况：

使用相同的＆＃34;查看器＆＃34;查询每个组件并定义一个免费的＆＃34;查看器＆＃34;每个组件上的片段。这些片段都会定义不同的数据要求，尽管名称相同，这看起来很混乱。
您可以为不同的组件创建唯一的片段名称，然后根据您要获取的数据类型重复使用不同名称的完全相同的根查询，这看起来非常愚蠢。

Answer 1

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

例如：

var componentOneFragment = Relay.QL`
    fragment on User {
        name
    }
`;

这里需要注意的一点是，您不需要为fragment userFragment on User { ... }这样的片段命名。通过声明${Component.getFragment(componentOneFragment)}，从路由器中的中继查询动态引用组件片段时，这将为您提供更大的灵活性。希望这有帮助！

修改

对每个组件使用相同的“查看器”查询并定义一个每个组件上的免费“查看器”片段。这些碎片尽管有相同的数据要求，它们都会定义不同的数据要求名字，这看起来很混乱。

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

此片段可能包含在您需要用户数据的其中一个中继容器中：

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, }, }, }, } ` } });

只要用户和 Widget 都是Root Query对象下的类型，这些都可以在同一个GraphQL查询中动态使用（即$Component.getFragment('viewer')）

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

1 个答案: