在 React-relay 嵌套突变后没有获得有效载荷

IT技术 reactjs relayjs graphql
2021-05-14 03:25:01

这是之前在 SO 上发布的有关 react-relay 突变警告的此答案的后续问题

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

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

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

我尝试过的工作有效,但我没有得到AddSubTaskMutation突变的返回 PayLoad 这是我迄今为止尝试过的:

添加TaskMutation.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 
            },
          }
        },
      }`,
    }`,
  };
  ...

添加SubTaskMutation.js

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

任务创建.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才能完成这项工作?

1个回答

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

步骤1

  • 去掉AddTaskMutationand中的碎片AddSubtaskMutation,它们似乎没有必要
  • 修改AddTaskMutation的构造函数以获取任务的一堆字段并classroomID指定受影响的教室
  • 同理,修改AddSubTaskMutation为子任务取一堆字段,ataskID指定父任务
  • 确保您的AddTaskMutation有效负载包括修改后的教室和新的任务边缘
  • 使用 定义RANGE_ADD突变classroomID以针对新任务的教室
  • 使用给定的(我不确定你如何存储子任务,可能是一个连接)定义一个FIELDS_CHANGE突变AddSubtaskMutation来改变父级taskIDRANGE_ADD如果您真的需要,您可以将其更改为 a

第 2 步:简化

  • 似乎没有必要在 1+N 个突变(N 个子任务)中执行此操作,因为您似乎一开始就拥有所有信息。我会修改输入AddTaskMutation以接受一个新任务和一系列子任务,并一次性完成所有...