getOptimisticResponse 不适用于带参数的字段答案

【问题标题】：getOptimisticResponse is not working for fields with argumentsgetOptimisticResponse 不适用于带参数的字段
【发布时间】：2016-11-26 04:27:06
【问题描述】：

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

由于某种原因，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,
      },
    };
  }
}

【问题讨论】：

标签： graphql relayjs relay

【解决方案1】：

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

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

【讨论】：