Here’s the situation; you have a Relay application and you want to render a RelayContainer after your Relay app has already loaded. You cannot include this RelayContainer in the initial app because you need runtime information to determine which RelayContainer to load. For example, you want to load a modal that will contain new data that you need to query the backend for, which you can’t include in your initial Relay.RootContainer hierarchy.

I was surprised by the lack of information on this use case. What do you do when your app won’t fit into the initial Relay app data dependency graph? (I’m also surprised how difficult it is to describe this.)

The simplest way I’ve found is to instantiate a new Relay.RootContainer or Relay.Renderer. In other words, you instantiate a new Relay “app”. I use the term “app” here to denote an instance of Relay.RootContainer.

The use of the term “app” confused me initially because it isn’t logical or intuitive to instantiate an “app” inside of another “app”. I was certain there was a way to do what I wanted without resorting to something which sounded so strange.

I realized I shouldn’t be thinking about an instance of Relay.RootContainer as an “app”, but rather just as a component (or container in Relay-land) that just so happens to also request data from the backend. If you find that what you want to do won’t fit into the RelayContainer hierarchy you’re currently working in, create a new Relay.RootContainer.

Here’s an example where when someone clicks on a button, it instantiates a new Relay.RootContainer. This will send out a new query to the backend and render what you need.

onClick = () => {
  ReactDom.render(<Relay.RootContainer
    Component={YourContainer}
    route={new YourRoute({variableOne: this.props.variableOne, variableTwo: this.props.variableTwo})},
    document.getElementById("your-element-id")
  />
}

Hope this helps someone out there. Also, if you think you have a better way of describing the issue please let me know and I’ll update this post.