Use result of Relay Mutation as a Relay Container Prop

Question

The flow I'm trying to achieve is

User clicks a button "Create X"
create a blank X using a relay mutation
open a modal to edit X

I have a server side mutation which returns x (of type X), its parent, and the edge between them so I can do a RANGE_ADD clientside and update the store.

const mutation = new CreateBlankXMutation({ ... })
Relay.Store.commitUpdate(mutation, {
  onSuccess: ({ createBlankXMutation }) => {
    const { x } = createBlankXMutation
    showModal(EditXModal, { x })
  }
})

showModal is a redux action which creates a component from the first argument, and supplies it props from the second argument.

EditXModal is a Relay Container,

{
  fragments: {
    x: () => Relay.QL`
      fragment on X { ... }
    `
  }
}

the specific error I'm getting is

RelayContainer: component `Container` was rendered with variables 
that differ from the variables used to fetch fragment `creative`. 
The fragment was fetched with variables `(not fetched)`, 
but rendered with variables `{}`.

You usually get that error when you forget to compose your Fragments properly, so in CreateBlankXMutation, I tried to add EditXModal.getFragment(...) to getFatQuery and the REQUIRED_CHILDREN config (both times under x) - no dice, same error.

If I "inspect" the object (console.log) I can see that the fragments are being populated correctly after the mutation - x looks like { id: "...", ..., _someField: ... }, but the fragments are resolved properly once the modal is loaded (x looks identical - with _... fragment properties, still).

Tyler Sebastian Tyler Sebastian · Accepted Answer · 2017-08-17T18:53:15

I fixed it, but I don't like how I fixed it, so I'd still appreciate insight from others.

Relay.Store.commitUpdate(mutation, {
  onSuccess: ({ createBlankXMutation }) => {
    const { x: { id: xId } } = createBlankXMutation

    // re-fetch all xs in the parent container
    this.props.relay.forceFetch(null, (readyState) => {
      if (readyState.done) {
        const { xList } = this.props // all xs in the parent
        const x = xList.find((x) => x.id === xId)

        this.props.showModal(EditXModal, { x })
      }
    })
  }
})

The parent fetches the appropriate fragments, so when the object is loaded by EditXModal, all the fragments are available to be resolved properly.

Use result of Relay Mutation as a Relay Container Prop

1 Answers