How to add “handleRemove” function to Graphql both Query and Delete Mutation?

Question

My Application is using React, Apollo client 2, Apollo Server and MongoDB as the database. I try to add "handleRemove" function to query page that I use React. But when I click "Delete" button, I get "deleteCustomer" is not the function. Here is my code of this page, please help to find out the solution.

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

The name of the mutation should be a string. The quotes are missing:

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