如何在不复制片段的情况下传递道具

Question

我的父组件以嵌套片段结尾，如下所示：

query MyAppQuery(
    $id
    $a
    $b
    $c
) {
    viewer {
      ...App_viewer
      ...ComponentA_viewer @include(if: $a)
      ...ComponentB_viewer @include(if: $b)
      ...ComponentC_viewer @include(if: $c)
    }
    allEmployees: allUsers(userType: "1") {
        ...ComponentA_allEmployees @include(if: $a)
        ...ComponentB_allEmployees @include(if: $b)
        ...ComponentC_allEmployees @include(if: $c)
    }
};

如果我不包含所有这些子片段，中继将失败，但所有这些的数据都是相同的，必须在需要登录用户的所有子组件上声明一个视图片段似乎很愚蠢。

我如何才能在我的应用程序顶部请求这段数据并使其可供子组件使用，而不必包含所有这些片段。

这开始感觉像是反向道具钻探，我必须在我的应用程序的低端声明一个片段并将其向上传递到链中。

与所有员工相同。这是相同的数据，我应该只获取一次并通过上下文传递或访问，但我必须传递所有这些愚蠢的片段或中继投诉。

Answer 1

这是 Relay 的核心模式，尽管冗长，但实际上非常值得鼓励。

在Relay中，鼓励子组件以片段的形式自行指定数据需求。

最终，您最终会积累大量散布在您应用中其他地方的片段，因此值得指出几个关键的 Relay 功能，以说明其优点：

如果您声明多个彼此相邻的请求相同字段的片段，中继将不会向您的 API 发送重复请求。相反，它们将在一次往返中全部获取一次。您不必担心引入 overfetching/duplicate 查询问题，因为它们在 Relay 中不存在。
Relay 通过 Relay 编译器引入了一个编译步骤，它可以智能地分析您的 GraphQL 架构和您在代码中定义的任何 graphql 模板标签。这会生成 artifacts，这有助于自动管理获取数据和更新中继存储，因此您不必这样做。通过声明大量片段，您可以有效地告诉编译器和存储组件的数据要求，即使它们是 same/similar。这里的重复是让 Relay 变得伟大的原因。
您在树根部的 QueryRenderer 祖先将处理实际的提取，您在树中较低的子组件上定义的片段指示中继编译器和存储将数据发送到哪里一旦它被取出。这是从 #2 开始的。

所以，简而言之，要充分利用 Relay，用片段声明你的组件的数据需求，让 Relay 来做繁重的工作，不用担心重复和缺乏可重用性。这对你有利。

如何在不复制片段的情况下传递道具

How to pass down props without duplicating fragments

javascript

relay

graphql

relayjs

react-relay