graphql - getOptimisticResponse 不适用于带参数的字段

Question

下面是我在组中添加和删除人员的代码。

出于某种原因，getOptimisticResponse不适用于这种突变。

这可能是由于groupId对isInGroup字段有争论吗？

class GroupAddRemovePersonMutation extends Relay.Mutation {
  static initialVariables = {
    groupId: null,
  }

  static prepareVariables(prevVars) {
    return prevVars;
  }

  static fragments = {
    person: () => Relay.QL`
      fragment on Person {
        id
        isInGroup(groupId: $groupId)
      }
    `,
  }

  getMutation() {
    return this.props.isInGroup ?
      Relay.QL`mutation { groupRemovePerson }` :
      Relay.QL`mutation { groupAddPerson }`;
  }

  getVariables() {
    const {groupId, person} = this.props;
    return {
      personId: person.id,
      groupId,
    };
  }

  getCollisionKey() {
    const {groupId, person} = this.props;
    return `groupPerson_${groupId}_${person.id}`;
  }

  getFatQuery() {
    const {groupId, person, isInGroup} = this.props;
    return isInGroup ?
      Relay.QL`
        fragment on GroupRemovePersonMutationPayload {
          person {
            id
            groups { id }
            isInGroup(groupId: "${groupId}")
          }
          group {
            id
            person
            hasPerson(personId: "${person.id}")
          }
        }
      ` :
      Relay.QL`
        fragment on GroupAddPersonMutationPayload {
          person {
            id
            groups { id }
            isInGroup(groupId: "${groupId}")
          }
          group {
            id
            person
            hasPerson(personId: "${person.id}")
          }
        }
      `;
  }

  getConfigs() {
    const {groupId, person} = this.props;
    return [{
      type: 'FIELDS_CHANGE',
      fieldIDs: {
        person: person.id,
        group: groupId,
      },
    }];
  }

  getOptimisticResponse() {
    const {groupId, person, isInGroup} = this.props;
    return {
      person: {
        id: person.id,
        isInGroup: !isInGroup,
      },
      group: {
        id: groupId,
        hasPerson: !isInGroup,
      },
    };
  }
}

Answer 1

我会先尝试将其添加groupId到乐观的响应中。根据我的经验，乐观响应必须与胖查询的形状完全匹配。

如果在生成乐观响应时没有 groupIds，您可以尝试替换临时值，直到从服务器返回响应。当您渲染连接并为视图提供键以区分重复的 React 元素时，通常会发生这种情况。