getOptimisticResponse 不适用于带参数的字段

Posted 2023-03-08

【中文标题】getOptimisticResponse 不适用于带参数的字段

【英文标题】：getOptimisticResponse is not working for fields with arguments

【发布时间】：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,
      ,
    ;
  

【参考方案1】：

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

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