Question

这是this answer之前发布的关于反应中继突变警告的后续问题。

“在您的情况下，您需要做的是将FeatureLabelNameMutation getFragment添加到您的AddCampaignFeatureLabelMutation查询。”

就像那个问题中的OP一样，我也想做一个嵌套的接力突变，我已经尝试过做@Christine的建议，但是我不确定究竟要把getFragment部分放在哪里。

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

我尝试的是有效的，但我没有得到AddSubTaskMutation突变的返回PayLoad。这是我到目前为止所尝试的内容：

AddTaskMutation.js

export default class AddTaskMutation extends Relay.Mutation {
  static fragments = {
    classroom: () => Relay.QL`
      fragment on Classroom { 
        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,
    classroom: this.props.classroom
  }),
  {
    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: {
    classroom: () => Relay.QL`
      fragment on Classroom {
        id,
        tasks(last: $limit) {
          edges {
            node {
              id,
              ...
            }   
          }
        },
        ...
        ${AddTaskMutation.getFragment('classroom')},
      }
    `,
  },
});

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

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以使其有效？

Answer 1

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

第1步

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

步骤2：简化

当您在开始时似乎拥有所有信息时，似乎没有必要在1 + N突变（N子任务）中执行此操作。我修改了AddTaskMutation的输入以接受一个新任务和一系列子任务，并立即完成所有操作......

在React-relay嵌套变异之后没有获得有效负载

AddTaskMutation.js

AddSubTaskMutation.js

TaskCreate.js

1 个答案: