使用 Relay Mutation 的结果作为 Relay Container Prop答案

【问题标题】：Use result of Relay Mutation as a Relay Container Prop使用 Relay Mutation 的结果作为 Relay Container Prop
【发布时间】：2018-01-26 06:37:18
【问题描述】：

我想要达到的流程是

用户单击“创建 X”按钮
使用中继突变创建一个空白 X
打开模式编辑 X

我有一个服务器端突变，它返回 x（X 类型）、它的父级以及它们之间的边缘，因此我可以在客户端执行 RANGE_ADD 并更新存储。

const mutation = new CreateBlankXMutation({ ... })
Relay.Store.commitUpdate(mutation, {
  onSuccess: ({ createBlankXMutation }) => {
    const { x } = createBlankXMutation
    showModal(EditXModal, { x })
  }
})

showModal 是一个 redux 操作，它从第一个参数创建一个组件，并从第二个参数提供它的 props。

EditXModal 是一个中继容器，

{
  fragments: {
    x: () => Relay.QL`
      fragment on X { ... }
    `
  }
}

我得到的具体错误是

RelayContainer: component `Container` was rendered with variables 
that differ from the variables used to fetch fragment `creative`. 
The fragment was fetched with variables `(not fetched)`, 
but rendered with variables `{}`.

当您忘记正确编写 Fragments 时，通常会出现该错误，因此在 CreateBlankXMutation 中，我尝试将 EditXModal.getFragment(...) 添加到 getFatQuery 和 REQUIRED_CHILDREN 配置（两次都在 x 下） - 否骰子，同样的错误。

如果我“检查”对象 (console.log)，我可以看到片段在突变后被正确填充 - x 看起来像 { id: "...", ..., _someField: ... }，但是一旦加载模式，片段就会正确解析 ( x 看起来相同 - 仍然具有 _... 片段属性）。

【问题讨论】：

标签： reactjs graphql relayjs react-relay

【解决方案1】：

我修复了它，但我不喜欢我修复它的方式，所以我仍然会感谢其他人的见解。

Relay.Store.commitUpdate(mutation, {
  onSuccess: ({ createBlankXMutation }) => {
    const { x: { id: xId } } = createBlankXMutation

    // re-fetch all xs in the parent container
    this.props.relay.forceFetch(null, (readyState) => {
      if (readyState.done) {
        const { xList } = this.props // all xs in the parent
        const x = xList.find((x) => x.id === xId)

        this.props.showModal(EditXModal, { x })
      }
    })
  }
})

父级获取适当的片段，因此当对象被 EditXModal 加载时，所有片段都可以正确解析。

【讨论】：