Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why is prepareInitialRender async? #61

Closed
Gregoor opened this issue Jan 16, 2017 · 2 comments
Closed

Why is prepareInitialRender async? #61

Gregoor opened this issue Jan 16, 2017 · 2 comments
Labels

Comments

@Gregoor
Copy link

Gregoor commented Jan 16, 2017

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?

@denvned
Copy link
Owner

denvned commented Jan 18, 2017

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.

@Gregoor
Copy link
Author

Gregoor commented Jan 18, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants