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

Posted 2023-03-10

【中文标题】似乎它忽略了 apollo graphql 中的更新突变？

【英文标题】：Seem like it ignore update mutation in apollo graphql?

【发布时间】：2018-09-05 17:36:08

【问题描述】：

我有一个 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;

【参考方案1】：

您正在使用 mutate 道具，但未在选项中提供 name。 尝试使用其中一种方法，它会完美运行。

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

或

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