I am creating crud app using meteor+react+apollo+mysql but i am stucking in the edit operation i have already used the delete operation in component but i want to use update operation also in the same compoent.
Below is my component in which i want to use update mutation
import React, { Component} from ‘react’;
import PropTypes from ‘prop-types’;
import { graphql } from ‘react-apollo’;
import gql from ‘graphql-tag’;
class Post extends Component {
constructor(props) {
super(props);
this.removeMessage = this.removeMessage.bind(this);
this.updateData = this.updateData.bind(this);
this.state = {
update:false
}
}
removeMessage(event) {
event.preventDefault();
console.log("Remove function called")
// console.log("Data source >>>>", this.props.source, "id >>>", this.props.post.id ? this.props.post.id : '', this.props.post._id ? this.props.post._id : '');
console.log("Post props >>>>>>", this.props)
console.log("id >>", this.props.post.id)
this.props.delete(this.props.post.id)
}
updateData(event){
event.preventDefault();
console.log("update");
this.setState({
update:true
})
}
render() {
console.log("state ===> " , this.state.update)
if (this.state.update) {
return (
<div>
<input type="text"/>
<button>Update</button>
</div>
)
}else{
return (
<div>
{this.props.post.content}
<button type="button" onClick={this.removeMessage} id="delete">delete</button>
<button type="button" onClick={this.updateData} id="delete">Update</button>
</div>
)
}
}
}
// Post requires props with a post attribute with a content attribute of type string
Post.propTypes = {
post: PropTypes.shape({
content: PropTypes.string
}).isRequired,
delete: PropTypes.func.isRequired,
};
const deleteMySQlPost = gqlmutation deletePostMutation ($id: Int!) { deletePost(id: $id) { id } }
;
const updatePost = gqlmutation updatePostMutation ($id: Int!,$content:String!) { updatePost(id: $id,content:$content) { id content } }
;
export default Post = graphql(deleteMySQlPost,{
props: ({ mutate }) => ({
delete: (id) => mutate({ variables: { id } }),
update:(id,content)
}),
})(Post)