How do we combine mutations in Relay from multiple React components?

Question

I am new to Relay and I am currently trying to use mutations. In my use case, I have a form made up of several React components and I want to capture the changes/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.

Answer 1

I had asked the same question on GitHub where @yachaka and @josephsavona answered.
Here is @josephsavona's answer:-

...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 applyUpdate to optimistically apply each individual change, then roll all those optimistic mutations back when applying the final mutation.

See https://github.com/facebook/relay/issues/1461#issuecomment-264662371 for the full discussion.