Rendering a Relay Container After The Fact
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.
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.