1

我想要实现的流程是

  1. 用户单击“创建 X”按钮
  2. 使用中继突变创建空白 X
  3. 打开模态框以编辑 X

我有一个服务器端突变，它返回 x （类型X）、它的父级以及它们之间的边缘，所以我可以做一个RANGE_ADD客户端并更新商店。

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

showModal是一个 redux 动作，它从第一个参数创建一个组件，并从第二个参数为其提供道具。

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_CHILDRENx

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

4

1 回答 1

-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 })
      }
    })
  }
})

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

于 2017-08-17T18:53:15.170 回答