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

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 功能来说明为什么这是好的：如果您声明多个彼此相邻的片段请求相同的字段，Relay 不会向您的 API 发送重复的请求。相反，它们将在一次往返中全部获取一次。您不必担心引入过度获取/重复查询问题，因为它们在 Relay 中不存在。graphqlRelay 通过 Relay 编译器引入了一个编译步骤，该步骤可以智能地分析您的 GraphQL 架构以及您在代码中定义的任何模板标签。这会生成artifacts，它有助于自动管理数据获取和更新中继存储，因此您不必这样做。通过声明大量片段，您可以有效地告诉编译器和存储组件的数据要求，即使它们是相同/相似的。复制是 Relay 的伟大之处。位于树根部的 QueryRenderer 祖先将处理实际的获取，并且您在树中较低的子组件上定义的片段会指示 Relay Compiler 和 Store 在获取数据后将数据发送到何处。这是从#2 得出的。因此，简而言之，要充分利用 Relay，请使用片段声明组件的数据需求，并让 Relay 完成繁重的工作，而不必担心重复和缺乏可重用性。这对你有利。