Props value after receiving setVariables callback

Question

I have a question for the following scenario: If you use the setVariables method from the relay prop and change the variable in the way, that relay has to retrieve additional data from the server (for example click "load more stories" in the following playground example relay playgorund).

I would expect that after listening to the callbacks readyState with the values ready = true and done = true the props contain the newly fetched information. Like in the playground example, after increasing the numStoriesToLoad with the initial value 3 by 1 the prop viewer.storyFeed.edges.length is 4.

What actually happens is, that even after receiving the named callback, the props have still the old value. If this behavior is intentional, how can you chain setVariables calls which depend on the result of the previous call?

Answer 1

setVariables does not instantly update the variables.

It actually goes into a pending state and will keep returning the old variables until the props have been populated with the new data.

Checkout the _runVariables function in RelayContainer if you want to see how it is handled. it seems that when the ReadyStateCallback is called, the new props will not have been populated yet.

Source: https://github.com/facebook/relay/blob/0ba7d8c1cf2899ec2ac3e779ac7dedbff5f9d092/src/container/RelayContainer.js#L242-L322

Maybe you could handle that in componentWillReceiveProps then ?

Edit: Just found this:

https://github.com/facebook/relay/blob/0ba7d8c1cf2899ec2ac3e779ac7dedbff5f9d092/docs/APIReference-Container.md#example-5

setVariables does not immediately mutate variables, but creates a pending state transition. variables will continue returning the previous values until this.props has been populated with data that fulfills the new variable values.