转换手册

您的继电器经典应用程序在以下步骤中增加现代化:

步骤0:安装Relay v1.0 #

入门指南安装最新版本的Relay 。

Step 1: 增量转换为 Relay 兼容 #

开始转换您的组件和突变,从采用 Relay Modern API 'react-relay/compat' 模块(createFragmentContainer, createRefetchContainer, createPaginationContainer, commitMutation)。 从底层组件往上进行会比较容易。这个 转换脚本 应该能使这个步骤不会那么繁琐。

如果片段使用在运行时确定的变量, 请参见下文

步骤2:介绍 <QueryRenderer> #

一旦所有的组件和 mutation 转换为使用 Relay Modern API,转换为使用 QueryRenderer 而不是使用 Relay.RendererRelay.RootContainer 。您可以提供 Store'react-relay/classic'environment 大多数情况下。

步骤3:介绍 Relay Modern 运行时 #

一旦您的几个或所有视图正在使用 QueryRenderer, Store 'react-relay/classic' 可以替换为 RelayModernEnvironment。请记住, RelayModernEnvironment 并且 Store 不共享任何数据。 您可能想要暂停此步骤,直到具有重要数据重叠的视图可以同时切换。这一步是为您的应用程序解锁以发挥高性能。 使用 RelayModernEvironment 得到的应用程序将持续查询ID(而不是完整的查询字符串)发送到服务器,以及更多优化的数据规范化和处理。

步骤 4: 用 Relay Modern 代替 Relay 来清理 #

'react-relay/compat' 应用中的引用切换到 'react-relay'. 这更是一个清理步骤,阻止您的应用程序引入不必要 'react-relay/classic' 代码。

注意:在运行时确定变量值 #

目前只有一个支持的方法来设置动态变量的初始值:使用在包括该片段的查询中定义的全局变量(或在 QueryRenderer中通过 variables设置 )。

例如,如果 currentDate 设置了 QueryRenderer variables, 那么 $currentDate 可以在包含QueryRenderer的任何片段中被引用。 query.

如果您正在使用, createRefetchContainer 那么您的 refetch 方法也可能会更新这些变量以使用新的值进行呈现。