似乎它忽略了apollo graph ql中的更新突变？

Question

我有一个Apollo Graphql客户端项目。我尝试在查询中使用变异。但它似乎忽略了更新突变，因为查看效果很好。请帮助澄清问题。

我在改变编码方式方面做了很多尝试。在compose中交换变异和查询。更改更新文档的方式。但无法得到它。

我的代码如下：

import React, { Component } from 'react';
//import { withRouter } from 'react-router-dom';
import { graphql, compose } from 'react-apollo';
import { FormGroup, ControlLabel, Row, Col, Button } from 'react-bootstrap';
import { updateCustomer } from './graphql';
import { customerView } from './graphql';
import { customersList } from './graphql';
import validate from '../modules/validate';
//import Loading from '../components/Loading';
//import NotFound from './NotFound';

class EditCustomer extends Component {
    componentDidMount() {
        const component = this;
        validate(component.form, {
      rules: {
        firstname: {
          required: true,
        },
      },
      messages: {
        firstname: {
          required: 'please enter name',
        },
      },
        submitHandler() { component.handleSubmit(component.form); },
        });
    }

  handleSubmit(form) {
    const { mutate, history, match } = this.props;

    mutate({ 
      variables: {
        _id: match.params._customerid,
        salution: form.salution.value.trim(),
        firstname: form.firstname.value.trim(),
        lastname: form.lastname.value.trim(),
        nickname: form.nickname.value.trim(),
                email: form.email.value.trim(),
                phone: form.phone.value.trim(),
                mobile: form.mobile.value.trim(),
                createdAt: new Date(),
                updatedAt: new Date(),
      },
        updateCustomer: {
            _id: match.params._customerid,
        salution: form.salution.value.trim(),
        firstname: form.firstname.value.trim(),
        lastname: form.lastname.value.trim(),
        nickname: form.nickname.value.trim(),
                email: form.email.value.trim(),
                phone: form.phone.value.trim(),
                mobile: form.mobile.value.trim(),
                createdAt: new Date(),
                updatedAt: new Date(),
      },
      update: (store, { data: { updateCustomer } }) => {
        const data = store.readQuery({ query: customersList });
        //data.CustomersList.push(updateCustomer); // This push to the page. Encountered two children with the same key
        store.writeQuery({ query: customersList, data });
      },
    });
    this.form.reset();
    history.push(`/customers`);
  }

    render() {
        const { data: { loading, customerView }} = this.props;

  return ( !loading ? (
    <div className="EditCustomer">
        <Row>
            <Col xs={8} sm={4} md={3} lg={2}>
            <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
                <FormGroup>
                <ControlLabel>Salution</ControlLabel>
                <input
                type="text"
                name="salution"     
                defaultValue={customerView && customerView.salution}
                autoFocus
                />
                </FormGroup>
                <FormGroup>
                <ControlLabel>Firstname</ControlLabel>
                <input
                type="text"
                name="firstname"
                defaultValue={customerView && customerView.firstname}
                />
                </FormGroup>
                <FormGroup>
                <ControlLabel>Lastname</ControlLabel>
                <input
                type="text"
                name="lastname"
                defaultValue={customerView && customerView.lastname}
                />
                </FormGroup>
                <FormGroup>
                <ControlLabel>Nickname</ControlLabel>
                <input
                type="text"
                name="nickname"
                defaultValue={customerView && customerView.nickname}
              />
              </FormGroup>
                <FormGroup>
                <ControlLabel>Email</ControlLabel>
                <input
                type="text"
                name="email"
                defaultValue={customerView && customerView.email}   
              />
              </FormGroup>
                <FormGroup>
                <ControlLabel>Phone</ControlLabel>
                <input
                type="text"
                name="phone"
                defaultValue={customerView && customerView.phone}
              />
              </FormGroup>
                <FormGroup>
                <ControlLabel>Mobile</ControlLabel>
                <input
                type="text"
                name="mobile"
                defaultValue={customerView && customerView.mobile}
              />
              </FormGroup>
                <br />
                <br />
                <Button type="submit" bsStyle="success">
        Edit
        </Button>
        <br />
        </form>
            </Col>
      </Row>
        </div>
    ) : <div>Loding...</div> );
  }
}


const UpdateCustomerMutation = compose(
    graphql(updateCustomer, { name: 'updateCustomer' }),
    graphql(customerView, {
        options: (props) => ({
            variables: { _id: props.match.params._customerid },
        })
    }),

)(EditCustomer);

export default UpdateCustomerMutation;

Answer 1

您使用的是可变道具，而没有在选项中提供name。尝试使用以下方法之一

mutate({
  name: "updateCustomer"
  variables: {
    ...
  },
}

或

const { updateCustomer } = this.props
updateCustomer({
  variables: {
    ...
  },
})