使用中继环境的突变答案

【问题标题】：Mutations using Relay Environment使用中继环境的突变
【发布时间】：2016-12-10 17:23:17
【问题描述】：

我在 React Native 中使用 Relay，但在登录和注销时出现问题。

登录或注销后，Relay 会保留前一个用户的存储。为了解决这个问题，我使用Relay.Renderer 和Relay.Environment。如在每个Renderer 中，我放置Environment 的单例对象。

问题是我之前对Relay.Store 的对象进行了突变，如 Relay.Store.commitUpdate(new CreateProfile(), callback).

现在不行了。我猜这是因为Relay.Store 对服务器端点一无所知。但是Relay.Environment 可以。

现在我正在使用类似this.props.relay.commitUpdate(new CreateProfile(), callback) 的东西。当父组件被包装为Relay.Container 时，它工作得很好，所以它在 props 中有中继对象。

但是对于不是Relay.Containers 并且props 中没有Relay 对象的组件我该怎么办？

【问题讨论】：

标签： react-native graphql relayjs

【解决方案1】：

Relay.Store 是Relay.Environment 的全局可访问单例实例，Relay.Store.commitUpdate() 在该全局环境中更新数据。但是，由于您使用的是自己的 Relay.Environment 实例，因此要更新它，您需要使用 this.props.relay.commitUpdate()，正如您所指出的。这会更新容器渲染的环境。

如果需要从容器的子组件中进行突变，即未包装在 Relay.Container 中，有两种方法可以做到这一点。您可以简单地将 relay 属性传递给它们，因此在容器的渲染函数中您将拥有：

<Child relay={this.props.relay} />

但是，由于这些普通组件不在 Relay 容器中，因此它们目前不需要了解有关 Relay 的任何信息。如果你想让它们保持这种状态，你可以像这样在你的容器组件中编写更新的方法：

onCreateProfile = () => {
  this.props.relay.commitUpdate(new CreateProfile());
};

并且只在render 中将回调传递给您的子组件：

<Child onCreateProfile={this.onCreateProfile} />

如果您需要从组件层次结构中根本没有Relay.Container 的组件进行突变，您可以在更高的共享根组件中创建Relay.Environment使用 props 向上传递并向下传递（或使用上面显示的策略传递回调）。

【讨论】：