Isomorphic React Relay
Adds server side rendering support to React Relay.
If you are using react-router-relay, then you might also be interested in isomorphic-relay-router, which uses isomorphic-relay.
What's new
-
Since version 0.5 Isomorphic Relay uses a separate Relay store for each HTTP request. So, now Relay store does not grow boundlessly, also one user never see data intended for another user. ✌️ This became possible because of merging this and this PRs into Relay v0.7.
-
Since version 0.6, the network layer is also contextual, so it is now possible to pass request specific cookies to the GraphQL server. The corresponding PR is merged into Relay v0.8.
Acknowledgments
Thanks to @voideanvalue for the information that helped create the initial version this project. I also thank @josephsavona for valuable advices that helped improve it.
Installation
npm install -S isomorphic-relay
How to use
Create a Relay network layer on the server.
And if you are using Relay.DefaultNetworkLayer
, specify the full url to the GraphQL endpoint:
const GRAPHQL_URL = `http://localhost:8080/graphql`; const networkLayer = GRAPHQL_URL;
When processing a request on the server, prepare the data using IsomorphicRelay.prepareData
,
then render React markup using IsomorphicRelay.Renderer
in place of Relay.Renderer
(pass props
returned by IsomorphicRelay.prepareData
), and send the React output along with the
data to the client:
; app;
On page load in the browser, create an instance of Relay.Environment
, inject an Relay network
layer to it. Then inject the prepared data using IsomorphicRelay.injectPreparedData
, prepare
initial render using IsomorphicRelay.prepareInitialRender
, and render React using
IsomorphicRelay.Renderer
in place of Relay.Renderer
(pass props
returned by
IsomorphicRelay.prepareInitialRender
):
; const environment = ; environment; const data = JSON; IsomorphicRelay; const rootElement = document; // use the same rootContainerProps as on the serverIsomorphicRelay;
Example
See here.