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. :v: 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 = new Relay.DefaultNetworkLayer(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:

import IsomorphicRelay from 'isomorphic-relay';

app.get('/', (req, res, next) => {
  const rootContainerProps = {
    Container: MyContainer,
    queryConfig: new MyRoute(),
  };

  IsomorphicRelay.prepareData(rootContainerProps, networkLayer).then({data, props} => {
    const reactOutput = ReactDOMServer.renderToString(
      <IsomorphicRelay.Renderer {...props} />
    );

    res.render('index.ejs', {
      preloadedData: JSON.stringify(data),
      reactOutput
    });
  }, next);
});

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):

import IsomorphicRelay from 'isomorphic-relay';

const environment = new Relay.Environment();

environment.injectNetworkLayer(new Relay.DefaultNetworkLayer('/graphql'));

const data = JSON.parse(document.getElementById('preloadedData').textContent);

IsomorphicRelay.injectPreparedData(environment, data);

const rootElement = document.getElementById('root');

// use the same rootContainerProps as on the server
IsomorphicRelay.prepareInitialRender({ ...rootContainerProps, environment }).then(props => {
  ReactDOM.render(<IsomorphicRelay.Renderer {...props} />, rootElement);
});

Example

See here.