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元素时，通常会出现此情形。