I have an Apollo Graphql Client project. I try to use mutation with query. but it seems like it ignore update mutation, for viewing works fine. Please help to clarify the problem.
I have tried a lot on changing the way to code. Swap the mutation and query in compose. Change the way to update document. But cannot get it.
My code as following:
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;