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

Question

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

Answer 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 :)