Isomorphic React Relay
Enables server-side rendering of React Relay containers.
If you use react-router-relay you might also become interested in isomorphic-relay-router.
Acknowledgments
Thank you to everyone who helped in the development of this project with suggestions, testing, reported issues, pull-requests. Thank you to the Facebook employees who reviewed my contributions to Relay, which helped to improve the server-side rendering support.
Installation
npm install --save isomorphic-relay
How to Use
Here is an example with detailed comments of how isomorphic-relay can be used on the server:
import IsomorphicRelay from 'isomorphic-relay'; const rootContainerProps = Container: MyContainer queryConfig: ; app;
And here is an example of the code that can be used in the browser:
import IsomorphicRelay from 'isomorphic-relay'; const environment = ;environment; // Deserialize the data preloaded on the server.const data = JSON; // Use IsomorphicRelay.injectPreparedData() to inject the data into the Relay cache,// so Relay doesn't need to make GraphQL requests to fetch the data.IsomorphicRelay; // Use IsomorphicRelay.prepareInitialRender() to wait until all the required data// is ready for rendering of the Relay container.// Note that it is important to use the same rootContainerProps as on the server to// avoid additional GraphQL requests.IsomorphicRelay;
Also see the Star Wars example.