relayjs - 如何避免在中继突变中往返大量数据？

Question

假设我有一个 React 组件，它控制一个包含博客文章内容的 textarea。当用户更改博客文章时，我使用 Mutation 更新中继存储:

Relay.createContainer(
  React.createClass({
    handleChange(event) {
      Relay.Store.update(new BlogBodyMutation({
        body: event.target.value,
        blog: this.props.blog
      }))
    },
    render() {
      return (
        <textarea
          value={ this.props.blog.body }
          onChange={ this.handleChange }
        />
      );
    }
  }), {
    fragments: {
      blog: () => Relay.QL`
        fragment on Blog {
          body
          ${ BlogBodyMutation.getFragment('blog') }
        }
      `
    }
  }
)

class BlogBodyMutation extends Relay.Mutation {
  static fragments = {
    blog: () => Relay.QL`fragment on Blog { id }`
  };
  getMutation() {
    return Relay.QL`mutation { blog }`
  }
  getVariables() {
    return {
      id: this.props.blog.id,
      body: this.props.body
    }
  }
  getFatQuery() {
    return Relay.QL`fragment on BlogMutationPayload { blog { body } }`
  }
  getConfigs() {
    return [{ type: 'FIELDS_CHANGE', fieldIDs: { blog: this.props.blog.id }}]
  }
}

问题:每次我用 Mutation 更新 Store 时，Relay 都会将整个博客文章往返于后端!假设帖子大小为 50KB，即使去抖是 50KB + 每个去抖编辑往返的一些字节。有什么办法可以避免这种情况吗？

我已经尝试了一些，但还没有找到有效的解决方案。我尝试过使用带有空负载且没有字段配置的乐观响应，但这看起来很奇怪，并且在给定受控 textarea 的情况下实际上效果不佳。

Answer 1

您基本上是在寻求一种将乐观更新永久“写入”存储的方法 - Relay 不支持这种方法。真正影响 Relay 存储的唯一方法是使用实​​际的 GraphQL 突变和查询。

不过，这并不是世界末日。就您而言，您基本上只希望客户端进行自己的更改，而与服务器的操作无关。

我建议您在 Relay 之外管理“博客正文”状态。您可以将其存储在任何您喜欢的地方 - 组件状态、Redux 存储等。您可以通过中继查询初始化博客正文状态(这没有什么不同)，但之后只需自己管理它。

要在服务器上记录博客正文更改，请切换回使用中继突变，但不要声明任何 FIELDS_CHANGE 配置或任何内容。这将指示 Relay 不要尝试重新获取博客正文数据并节省您试图避免的往返时间。

但请记住，使用此解决方案，您将在正确性(Relay 尝试确保这一点)和性能之间进行直接权衡。当然，这是一个经典的权衡。