javascript - 如何在不复制片段的情况下传递 Prop

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

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

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

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

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

Answer 1

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

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

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

1. 如果您声明多个彼此相邻的请求相同字段的片段，中继将不会向您的 API 发送重复请求。相反，它们将在一次往返中全部获取一次。您不必担心引入过度获取/重复查询问题，因为它们在 Relay 中不存在。

2. Relay 通过 Relay Compiler 引入了一个编译步骤，它可以智能地分析您的 GraphQL 架构和您在代码中定义的任何 graphql 模板标签。这会生成工件，它有助于自动管理获取数据和更新中继存储，因此您不必这样做。通过声明大量片段，您可以有效地告诉编译器和存储组件的数据要求，即使它们相同/相似。此处的重复是 Relay 的伟大之处。

3. 您在树根部的 QueryRenderer 祖先将处理实际的提取，您在树中较低的子组件上定义的片段指示中继编译器和存储在提取数据后将数据发送到哪里.这是从 #2 开始的。

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