删除时出现中继错误：RelayMutationQuery：胖查询中的字段名称无效

Posted 2023-03-08

【中文标题】删除时出现中继错误：RelayMutationQuery：胖查询中的字段名称无效

【英文标题】：Relay Error when deleting: RelayMutationQuery: Invalid field name on fat query

【发布时间】：2016-05-11 23:30:42

【问题描述】：

我在尝试提交删除突变时遇到了问题。当我提交时，我收到错误Uncaught Invariant Violation: RelayMutationQuery: Invalid field name on fat query, `company`.。查看、创建和更新节点都可以工作。由于某种原因，我无法删除。它在 fatQuery 中提到了 company 字段，但我在 fat 查询中唯一的字段是我从服务器返回的 deletedUserId。提前致谢！

组件：

import React, Component from 'react';
import Relay from 'react-relay';
import Link from 'react-router';
import DeleteUserMutation from 'mutations/DeleteUserMutation';
import styles from './EmployeeItem.css';

class EmployeeItem extends Component 
  render() 
    const user = this.props;
    return (
      <div className=styles.employee>
        <p><strong>ID:</strong> user.id</p>
        <p><strong>First Name:</strong> user.firstName</p>
        <p><strong>Last Name:</strong> user.lastName</p>
        <p><strong>Email:</strong> user.email</p>
        <div className="btn-group">
          <Link to=`/company/employees/$user.id` className="btn btn-primary">View Employee</Link>
          <button onClick=this.handleRemove className="btn btn-danger">Delete User</button>
        </div>
      </div>
    )
  

  handleRemove = (e) => 
    e.preventDefault();
    const user, company = this.props;

    Relay.Store.commitUpdate(new DeleteUserMutation(user, company));
  ;


export default Relay.createContainer(EmployeeItem, 
  fragments: 
    company: () => Relay.QL`
      fragment on Company 
        id
        $DeleteUserMutation.getFragment('company')
      
    `,
    user: () => Relay.QL`
      fragment on User 
        id
        firstName
        lastName
        email
        $DeleteUserMutation.getFragment('user')
      
    `
  
);

变异：

import React from 'react';
import Relay from 'react-relay';

export default class DeleteUserMutation extends Relay.Mutation 
  static fragments = 
    company: () => Relay.QL`
      fragment on Company 
        id
      
    `,
    user: () => Relay.QL`
      fragment on User 
        id
      
    `
  ;

  getMutation() 
    return Relay.QL`mutation deleteUser`;
  

  getFatQuery() 
    return Relay.QL`
      fragment on DeleteUserPayload 
        deletedUserId
      
    `;
  

  getVariables() 
    return 
      id: this.props.user.id,
    
  

  getConfigs() 
    return [
      type: 'NODE_DELETE',
      parentName: 'company',
      parentID: this.props.company.id,
      connectionName: 'employees',
      deletedIDFieldName: 'deletedUserId'
    ]
  

  // Wasn't sure if this was causing the error but it appears to be 
  // something else.
  // getOptimisticResponse() 
  //   return 
  //     deletedUserId: this.props.user.id
  //   
  // 

【参考方案1】：

此错误是指您在getConfigs() 实现中引用了“公司”这一事实。 NODE_DELETE 配置告诉 Relay 如何通过将存储中的节点（例如 parentID）映射到胖查询上的字段（例如 parentName）来构造变异查询。

虽然您今天可能不一定需要它，但您应该在此处将 company 添加到突变有效负载和胖查询中，因为公司受到此更改的影响。更具体地说，正在修改公司的员工连接:)

【讨论】：

这解决了我的问题。我在根字段中添加了一个 globalId（在我的例子中是一个名为“verify”的对象），并且我还在服务器上更改了我的突变以返回一个边，而不仅仅是底层类型。我还将根“验证”对象添加到突变输出字段中：客户端的中继突变需要知道哪个对象拥有连接，将新边缘放在哪里是有意义的。

【参考方案2】：

NevilleS 的解决方案为我解决了这个问题：

我在根字段中添加了一个 globalId（在我的例子中是一个名为“verify”的对象），我还在服务器上更改了我的突变以返回一个边，而不仅仅是底层类型。我还在突变输出字段中添加了根“验证”对象：客户端的中继突变需要知道哪个对象拥有连接，将新边放在哪里是有意义的。

export const Verify = new GraphQLObjectType(
name: 'Verify',
fields: () => (
  id: globalIdField('Verify'),
  verifications: 
    args: connectionArgs,
    type: VerificationConnection,
    resolve: (rootValue, args) => connectionFromArray(rootValue.verifications, args)
  ,

在突变的输出字段中添加“verify”和“verificationEdge”。

export const AddVerifiedSchool = mutationWithClientMutationId(
name: 'AddVerifiedSchool',
inputFields: 
  verification: 
    type: VerifiedSchoolInput
  
,
outputFields: 
  success: 
    type: GraphQLBoolean,
    resolve: () => true
  ,
  verificationEdge: 
    type: VerificationEdge,
    resolve: (verification, context) => 
      console.log('verification', verification);
      return verification
    
  ,
  verify: 
    type: Verify,
    resolve: (verification, context) => 
      return context.rootValue
    
  
,

将验证字段添加到胖查询中，并将（来自verify的globalId“id”）添加到片段中，并使用新的globalId来标识连接所在的节点。

static fragments = 
  verify: () => Relay.QL`fragment on Verify  id `,
  action: () => Relay.QL`fragment on Action  name url `
;

getConfigs() 
  return [
    type: 'RANGE_ADD',
    parentName: 'verify',
    parentID: this.props.verify.id,
    connectionName: 'verifications',
    edgeName: 'verificationEdge',
    rangeBehaviors: 
      '': 'append'
    
  ];


getFatQuery() 
  return Relay.QL`
  fragment on AddVerifiedSchoolPayload 
    verification 
      $VerifiedSchool.getFragment('verification')
    
    verify 
      id
    
  `