Search code examples
reactjsrelayjsrelay

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


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.


Solution

  • 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.