Calling setVariables is forcing a refetch from the server instead of using the cached results?

Question

I am attempting to render a component multiple times in a table (i.e. one instance of the component per table row). The component requires a Relay variable to be set to determine how to render the contents of the component.

I am setting this variable via a call to this.props.relay.setVariables in the component's componentWillMount lifecycle event. In my particular case, each of the components end up needing the same set of data from the server so I would expect that the first component to call this.props.relay.setVariables would result in a new fetch from the server but each subsequent component in the table would simply use the results of the fetch from the first component since the generated query is exactly the same for each component in the table.

However, what actually happens is that a new fetch is made for each component in the table which is terrible for performance. Is there some way to tell Relay to reuse the original fetch? I thought it was supposed to do this automatically by caching the queries.

FYI... the query is going through the node interface and the fragment type is an interface graph type.

Answer 1

It doesn't matter at all if query structure or data is the same for each item. Items are cached by IDs and if IDs are different (node interface requires IDs as we know), Relay requires data for each ID.

Why IDs? Because that enables data flattening and results in much efficient and granular caching. It also lets Relay to make efficient diffing which means that only the missing fields per ID are requested.

---

If in your particular case each of the components end up needing the same set of data, consider using a single Relay Container for parent component and pass the same data to each row. Problem solved!