Question

我想要实现的目标是

用户点击按钮＆＃34;创建X＆＃34;
使用中继突变创建空白X
打开一个模式来编辑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 `{}`.

当您忘记正确撰写片段时，通常会收到该错误，因此在CreateBlankXMutation中，我尝试将EditXModal.getFragment(...)添加到getFatQuery和REQUIRED_CHILDREN配置（两者都是x下的时间 - 没有骰子，同样的错误。

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

Answer 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加载对象时，所有片段都可以正确解析。

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

1 个答案: