-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How do we combine mutations from multiple components? #1461
Comments
Hey @nikhilag, class MyParentComponent extends Component {
state = {
newDate: null,
}
commit() {
this.props.relay.commitUpdate(
new UpdateMutation({
fragment: this.props.myFragment,
newData: {
date: this.state.newDate,
},
})
);
}
setDate = (newDate) => {
this.setState({ newDate });
}
render() {
return (
<form>
<MyDatePicker
onChange={this.setDate}
/>
</form>
);
}
}
const MyParentComponentContainer = createContainer(MyParentComponent, {
fragments: {
myFragment: () => Relay.QL`
fragment on MyType {
${UpdateMutation.getFragment('fragment')}
}
`,
},
}); |
Great question. As @yachaka answered, a straightforward approach would be to accumulate all of the changes from child components in a parent component (using callbacks and local state or something like Redux) and then make a single mutation when the user saves/commits the changes. One pattern is to use |
Thanks a lot @yachaka and @josephsavona. @josephsavona I am trying to understand the second part you mentioned. I read that Is this correct? Does it also mean that I will have to create small mutation types for each component and then combine them in the final mutation type? |
Yup, that's the idea. Excerpt that you can probably just define a single mutation field/type in your schema (e.g. |
Going to close this on the assumption that the comments so far have been sufficient to unblock you. Please comment again if you have any further questions. |
I am new to Relay and I am still trying to get more familiar with the idea of using mutations. In my use case, I have a form made up of several React components and I want to capture the mutation of each component, combine them in the parent component and then commit the changes to GraphQL server. How can I do this?
The examples that I have seen so far all deal with the mutation being used and committed in a single component. I want to use the same pattern that is used for querying where fragments are localised within the react component and then they are combined to create a query for server.
The text was updated successfully, but these errors were encountered: