如何解决问题错误:types.getNamedType(...)。getFields不是一个函数

时间:2016-10-04 07:12:07

标签: javascript reactjs graphql relay

**-- Relay Transform Error -- delete-customer-mutation.js --**

Error: types.getNamedType(...).getFields is not a function
File:  D:/development/wfc_admin/js/mutations/delete-customer-mutation.js


**-- GraphQL Validation Error -- delete-customer-mutation.js --**

Error: Unknown type "DeleteWidgetPayload".
File:  D:/development/wfc_admin/js/mutations/delete-customer-mutation.js
Source:
>
> fragment Delete on DeleteWidgetPayload @relay(pattern: true) {
>                    ^^^


**Package file:**
 **dependencies**

    "babel": "5.8.21",
    "babel-loader": "5.3.2",
    "babel-relay-plugin": "^0.1.1",
    "classnames": "^2.1.3",
    "express": "^4.13.1",
    "express-graphql": "^0.5.3",
    "graphql": "^0.6.0",
    "graphql-relay": "^0.4.2",
    "mongoose": "~4.1.7",
    "react": "^0.14.0-rc",
    "react-dom": "^0.14.0-rc",
    "react-relay": "^0.3.1",
    "react-router": "^2.8.1",
    "webpack": "^1.10.5",
    "webpack-dev-server": "^1.10.1"

**Container file Code**
ReactDOM.render(
  <Relay.RootContainer
    Component={CustomerToolContainer}
    //TODO Update userId
    route={new AppViewRoute()}
  />,
  document.getElementById('root')
);


**CustomerToolContainer is calling from customer-tool-container.js**

import Relay from 'react-relay';
import CustomerTool from '../components/Customer_tool';
import DeleteCustomerMutationType from '../mutations/delete-customer-mutation';
export default Relay.createContainer(CustomerTool, {
  fragments: {
        viewer: () => Relay.QL`
            fragment on Viewer {
                id

                customers {
                  id
                  name
                  address
                }

                ${DeleteCustomerMutationType.getFragment('viewer')}
            }
        `
    }
});

Customer_tool正在从Customer_tool.js 进行调用 这是调用DeleteCustomerMutation的代码。 我收到错误,任何人都可以指导我为这个问题需要做些什么。还在DeleteWidgetPayload上获取错误片段删除

import Relay from 'react-relay';
import React from 'react';
import CustomerList from './CustomerList.js';
import Customer from './Customer.js';
import CustomerRowComponent from './Customer_row';
import CustomerTableComponent from './Customer_table';
import DeleteCustomerMutation  from '../mutation/delete-customer-mutation';


export default class  CustomerTool extends React.Component {
    constructor(props) {
        super(props);

        this.state = {  editCustomerId: null };
        this._saveCustomer = this._saveCustomer.bind(this);
        this._editCustomer = this._editCustomer.bind(this);
        this._cancelEditCustomer = this._cancelEditCustomer.bind(this);
        this._deleteCustomer = this._deleteCustomer.bind(this);

    }
    _appendCustomer(customer) {
        Relay.Store.commitUpdate(new InsertCustomerMutation(Object.assign({
            viewer: this.props.viewer, customer: null }, customer)));
    }

    _updateCustomer(customer) {
        //Relay.Store.commitUpdate(new UpdateWidgetMutation(
            //Object.assign({   viewer: this.props.viewer, customer: customer }, customer)
        //));       
    }

    _saveCustomer(customer) {

        if (customer.id !== -1) 
        {

            this._updateCustomer(customer);
        } 
        else 
        {   
            alert(customer);
            //this._appendCustomer(customer);
        }
        this.setState({ editCustomerId: null });
    }

    _editCustomer(customer) {
        alert(customer.id);
        this.setState({ editCustomerId: customer.id });
    }

    _cancelEditCustomer() {
        this.setState({ editCustomerId: null });
    }

    _deleteCustomer(customer) {
        //alert(customer.name);
        Relay.Store.commitUpdate(new DeleteCustomerMutation ({
            viewer: this.props.viewer, 
            customer, 
            customerId: customer.id
        }));            

    }

  render() {
    let viewer = this.props.viewer;
        return (
                <div>
                    <CustomerTableComponent  
                    editCustomerId={this.state.editCustomerId}
                    onSave={this._saveCustomer}
                    onEdit={this._editCustomer}
                    onCancelEdit={this._cancelEditCustomer} 
                    onDelete={this._deleteCustomer}
                    customers={viewer.customers}/>
                </div>
            );  
  }
}

以下是delete-customer-mutation.js的代码

import Relay from 'react-relay';

export default class extends Relay.Mutation {

    static fragments = {
        viewer: () => Relay.QL`fragment on Viewer { id }`
    }

    getMutation() {
        return Relay.QL`mutation { deleteCustomer }`;
    }

    // receives the parameters from the constructor, builds
    // the variables to send the GraphQL server
    getVariables() {
        return {
            customerId: this.props.customerId
        };
    }   

    getConfigs() {
        return [{
            // delete operation
            type: 'NODE_DELETE',
            // triggers update from container fragment viewer id
            // this is the name of property from the output field
            parentName: 'viewer', 
            // id of viewer being updated
            parentID: this.props.viewer.id,
            // name of the connection on the viewer
            connectionName: 'customers', 
            // fat query payload field name of the id for the deleted node
            deletedIDFieldName: 'customerId'
        }];
    }

    getFatQuery() {
        // corresponds to the structure of the output types
        // patten is used to not specify the parameters for the connections
        return Relay.QL`
            fragment on DeleteCustomerPayload @relay(pattern: true) {
                viewer {
                    customers {
                        edges {
                            node {
                                id
                                name
                                description
                                color
                                size
                                quantity
                                owner {
                                    id
                                    firstName
                                    lastName
                                }
                            }
                        }
                    }
                }
                customerId
            }
        `;
    }
} 

0 个答案:

没有答案