denvned/isomorphic-relay

Why is prepareInitialRender async?

Gregoor opened this issue ยท 2 comments

First of all, thanks for the amazing work ๐Ÿ‘

I'm trying to integrate this project with next.js, but I'm struggling with rehydrating in the client. Unfortunately in next.js the render funciton is sync (just like in React). There is an async fn called getInitialProps to collect data, but that is only called server-side or on page transition.

So I looked into rehydrating Relay in the render fn (https://github.com/Gregoor/next.js-relay-example/blob/9ee954a8f6449d1891ae546799c1bc0e564d55aa/pages/index.js#L62), but since prepareInitialRender is async, that won't really work. So I was wondering what the reason behind it is, since theoretically all the data is already there, right? Is it that there is simply no Relay API to get the initial render props synchronously?

prepareInitialRender have to be async because it checks that the data is really available in the cache, and if it is not, it fetches the missing data. But if you are brave you can skip calling prepareInitialRender and pass a fake initialReadyState to <IsomorphicRelay.Renderer>.

But I think a more correct solution is to fix the design of next.js, and make getInitialProps be called on the client-side initial render also.

thanks for the swift helpful response!
I'll go with brevity, as MobX and redux got along synchronously, I'll have to make it work with the same API.

To my surprise the data from getInitialProps is available in the client, without me doing anything, so this seems pretty much solved now. What I struggle with now is that the environment on the client side, is not of the Environment interface, but rather just a simple data object. I tried instantiating a new environment and simply assigning these data properties (namely _storeData), but that just leads to the relay component being rendered with the viewer being null.
Here is how I assign it:

const environment = Object.assign(new Relay.Environment(), environmentData /* == {_storeData: something} */);

Do you have some pointer on how to properly initialize an environment? I looked through the Relay source, though didn't find anything useful.