GetOptimisticResponse funktioniert nicht für Felder mit Argumenten

Question

Unten ist mein Code zum Hinzufügen und Entfernen einer Person aus einer Gruppe.

Aus irgendeinem Grund funktioniert getOptimisticResponse nicht für diese Mutation.

Könnte das ein Argument groupId für isInGroup Feld sein?

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

Ich würde versuchen, zuerst die groupId auf die optimistische Antwort hinzufügen. Meiner Erfahrung nach muss die optimistische Antwort exakt mit der Form der Fettfrage übereinstimmen.

Wenn Sie zu dem Zeitpunkt, zu dem die optimistische Antwort generiert wird, keine groupIds haben, können Sie versuchen, temporäre Werte zu ersetzen, bis die Antwort vom Server zurückgegeben wird. Dieses Szenario tritt häufig auf, wenn Sie eine Verbindung rendern und Schlüssel für die Ansicht bereitstellen, um wiederholte React-Elemente zu unterscheiden.