React-relay 嵌套突变后未获得有效负载

Posted 2023-03-08

【中文标题】React-relay 嵌套突变后未获得有效负载

【英文标题】：Not getting payload after React-relay nested mutation

【发布时间】：2016-05-13 20:36:15

【问题描述】：

这是this answer 之前在 SO 上发布的关于 react-relay 突变警告的后续问题。

“在您的情况下，您必须将 FeatureLabelNameMutation getFragment 添加到您的 AddCampaignFeatureLabelMutation 查询中。”

与该问题中的 OP 一样，我也想进行嵌套中继突变，并且我已经尝试按照 @Christine 的建议进行操作，但我不确定将 getFragment 部分放在哪里。

在我的应用程序中，我想在用户创建任务时创建一个包含多个嵌套“子任务”的“任务”。

我尝试过的工作，但我没有得到 AddSubTaskMutation 突变的返回 PayLoad。到目前为止，这是我尝试过的：

AddTaskMutation.js

export default class AddTaskMutation extends Relay.Mutation 
  static fragments = 
    clas-s-room: () => Relay.QL`
      fragment on Clas-s-room  
        id,
        tasks(last: 1000) 
          edges 
            node 
                id,
                $AddSubTaskMutation.getFragment('task'), //<-- what I tried adding 
            ,
          
        ,
      `,
    `,
  ;
  ...

AddSubTaskMutation.js

export default class AddSubTaskMutation extends Relay.Mutation 
  static fragments = 
    task: () => Relay.QL`
      fragment on Task  
        id,
      `,
   ;
   ...

TaskCreate.js

Relay.Store.update(
  new AddTaskMutation(
    title,
    instruction,
    start_date,
    end_date,
    published: isPublished,
    clas-s-room: this.props.clas-s-room
  ),
  
    onSuccess: (response) => 
      let taskEdge = response.addTask;
      for (let subTask of this.state.subTaskContent) 
        Relay.Store.update(
          new AddSubTaskMutation(
            task: taskEdge.node,
            type: subTask['type'],
            position: subTask['position'],
            ...
          ),
        );
      
    
  
)
...
export default Relay.createContainer(TaskCreate, 
  prepareVariables() 
    return 
      limit: Number.MAX_SAFE_INTEGER || 9007199254740991,
    ;
  ,
  fragments: 
    clas-s-room: () => Relay.QL`
      fragment on Clas-s-room 
        id,
        tasks(last: $limit) 
          edges 
            node 
              id,
              ...
               
          
        ,
        ...
        $AddTaskMutation.getFragment('clas-s-room'),
      
    `,
  ,
);

除了没有收到有效载荷外，我还收到以下警告：

Warning: RelayMutation: Expected prop `task` supplied to `AddSubTaskMutation` to be data fetched by Relay. This is likely an error unless you are purposely passing in mock data that conforms to the shape of this mutation's fragment.
Warning: writeRelayUpdatePayload(): Expected response payload to include the newly created edge `subTaskEdge` and its `node` field. Did you forget to update the `RANGE_ADD` mutation config?

所以我的问题是：我应该在哪里添加 getFragment 到 AddTaskMutation.js 来完成这项工作？

【问题讨论】：

使用getFragment 进行突变有点不常见 - 只有当突变本身需要额外数据时才需要在突变执行之前。那么，当您真的只想添加一个新任务时，看到您的突变请求多达 1000 个其他任务，这有​​点奇怪。您是否将任何这些数据用于突变本身？

【参考方案1】：

据我所知，问题在于您并不真正了解突变“片段”与其他突变属性（胖查询和配置）的区别。您看到的警告与 Relay 有关，注意到您提供的任务道具不是来自 AddSubtaskMutation 片段，而是来自 AddTaskMutation 突变查询。但这实际上只是一个红鲱鱼。你的问题是你根本不需要那些片段，你只需要适当地配置突变来创建你的新节点和边缘。这里有几个建议。

步骤#1

去掉AddTaskMutation 和AddSubtaskMutation 中的片段，它们似乎没有必要 修改 AddTaskMutation 的构造函数以获取任务的一堆字段和 clas-s-roomID 以指定受影响的教室 同样，修改AddSubTaskMutation 为子任务获取一堆字段，并修改taskID 以指定父任务 确保您的 AddTaskMutation 有效负载包括修改后的教室和新的任务边缘 使用clas-s-roomID 定义RANGE_ADD 突变，以针对新任务的教室 在AddSubtaskMutation 上定义一个FIELDS_CHANGE 突变，使用给定的taskID 突变父级（我不确定您如何存储子任务，可能是连接）。如果您真的需要，可以将其更改为 RANGE_ADD。

第 2 步：简化

似乎没有必要在 1+N 突变（N 个子任务）中执行此操作，因为您似乎一开始就掌握了所有信息。我会修改AddTaskMutation 的输入以接受一个新任务和一组子任务，然后一次性完成...

【讨论】：

感谢您的意见！明天早上我会在工作中测试这些建议，然后再回复你。再次感谢！