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

Posted 2023-03-08

【中文标题】使用 Relay Mutation 的结果作为 Relay Container Prop

【英文标题】：Use result of Relay Mutation as a 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 看起来相同 - 仍然具有 _... 片段属性）。

【参考方案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 加载时，所有片段都可以正确解析。