如何在Graphql中添加“handleRemove”函数查询和删除变异？

Question

我的应用程序使用React，Apollo客户端2，Apollo Server和MongoDB作为数据库。我尝试添加“handleRemove”函数来查询我使用React的页面。但是当我点击“删除”按钮时，我得到“deleteCustomer”不是该功能。 这是我的本页代码，请帮助找出解决方案。

import React, { Component } from 'react';
import gql from 'graphql-tag';
import { graphql, compose } from 'react-apollo';
import { Link } from 'react-router-dom';
import { Button, Alert } from 'react-bootstrap';
import Loading from '../components/Loading';

class Customers extends Component {

  handleRemove = async (customerID) => {
        const result = await this.props.deleteCustomer({
            variables: {
                _id: customerID,
            },
    })
  }

    render() {
        const { data: {loading, CustomersList }, match, history } = this.props;

      return ( !loading ? (
        <div className="Customers">
          <h2><p className="text-center">Customer List</p></h2>
          <Button><Link to={`/customers/new`}>Add Customer</Link></Button>
          <br />
          <br />
              {CustomersList.length ?
                    <table className="zui-table zui-table-rounded">
                    <thead>
                    <tr>
                        <th><p className="text-center">List</p></th>
                        <th>

                        </th>
                        <th><p className="text-center">Salution</p></th>
                        <th><p className="text-center">Firstname</p></th>
                        <th><p className="text-center">Lastname</p></th>
                        <th><p className="text-center">Nickname</p></th>
                        <th><p className="text-center">Email</p></th>
                        <th><p className="text-center">Phone</p></th>
                        <th><p className="text-center">Mobile</p></th>
                        <th />
                    <th />
                    </tr>
                </thead>
                    <tbody>
                            {CustomersList.map(({ _id, salution, firstname, lastname, nickname, email, phone, mobile, total_spent, createdAt, updatedAt }, index) => (
                                <tr key={_id}>
                        <td>{index+1}</td>
                        <td>

                        </td>
                                    <td>{salution}</td>
                        <td>{firstname}</td>
                        <td>{lastname}</td>
                        <td>{nickname}</td>
                        <td>{email}</td>
                        <td>{phone}</td>
                        <td>{mobile}</td>
                        <td>
                            <p className="text-center">
                        <button className="btn btn-info btn-sm"
                            onClick={() => history.push(`${match.url}/${_id}/edit`)}
                          >Edit</button>
                          </p>
                        </td>
                        <td>
                            <p className="text-center">
                            <button className="btn btn-danger btn-sm"
                            onClick={() => this.handleRemove(_id)}
                          >Delete</button>
                          </p>
                        </td>
                    </tr>
                    ))}
                </tbody>
                </table> : <Alert bsStyle="warning">Nobody registered yet!</Alert>}
            </div>
      ) : <Loading /> );
    }
}



export const customersListQuery = gql`
    query customersListQuery {
    CustomersList {
        _id
        salution
        firstname
            lastname
            nickname
            email
            phone
            mobile
            total_spent
            createdAt
            updatedAt
    }
  }
`;

export const deleteCustomer = gql`
  mutation deleteCustomer($_id: ID!) {
    deleteCustomer(_id: $_id) {
      _id
    }
  }
`;


export default compose(
    graphql(customersListQuery),
    graphql(deleteCustomer, { name: deleteCustomer }),
)(Customers);

Answer 1

突变的名称应该是一个字符串。引号丢失：

...

export default compose(
    graphql(customersListQuery),
    graphql(deleteCustomer, { name: "deleteCustomer" }),
)(Customers);