Relay Error when deleting: RelayMutationQuery: Invalid field name on fat query

问题

I'm running into an issue when I attempt to commit a deletion mutation. When I commit, I get the error Uncaught Invariant Violation: RelayMutationQuery: Invalid field name on fat query, `company`.. Viewing, creating and updating nodes all work. For some reason I just can't delete. It mentions the company field in the fatQuery, but the only field I have in the fat query is the deletedUserId I get back from the server. Thanks in advance!

Component:

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')}
      }
    `
  }
});

Mutation:

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:

This error is referring to the fact that you reference the "company" in your getConfigs() implementation. The NODE_DELETE config tells Relay how to construct the mutation query by mapping nodes in the store (e.g. parentID) to fields on the fat query (e.g. parentName).

Although you might not necessarily need it today, you should add the company to the mutation payload & fat query here, since the company is being affected by this change. More specifically, the company's employees connection is being modified :)

回答2:

NevilleS' solution solved it for me:

I added a globalId to the root field (in my case an object called "verify") and I also changed my mutation on the server to return an edge, rather than just the underlying type. I also added the root "verify" object to the mutation output fields: it would make sense that the client's relay mutation needs that to know which object owns the connection, where to put the new edge.

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

Adding "verify" and "verificationEdge" to the mutation's output fields.

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
    }
  }
},

Adding the verify field to the fat query, and (the globalId "id" from verify) to the fragments, and using the new globalId to identify the node where the connection exists.

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
    }
  }`
}

来源：https://stackoverflow.com/questions/35165693/relay-error-when-deleting-relaymutationquery-invalid-field-name-on-fat-query