Adds server side rendering support to React Relay
npm install @boostmyschool/isomorphic-relayIsomorphic React Relay [![npm version][npm-badge]][npm]
======================
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 @boostmyschool/isomorphic-relay
How to Use
----------
Here is an example with detailed comments of how isomorphic-relay
can be used on the server:
``jsx
import IsomorphicRelay from 'isomorphic-relay';
const rootContainerProps = {
Container: MyContainer,
queryConfig: new MyRoute(),
};
app.get('/', (req, res, next) => {
// Create a Relay network layer. Note that on the server you need to specify
// the absolute URL of your GraphQL server endpoint.
// Here we also pass the user cookies on to the GraphQL server to allow them
// to be used there, e.g. for authentication.
const networkLayer = new Relay.DefaultNetworkLayer(
'http://localhost:8080/graphql',
{ headers: { cookie: req.headers.cookie } },
);
// Use IsomorphicRelay.prepareData() to prefetch the data required for
// rendering of the Relay container.
IsomorphicRelay.prepareData(rootContainerProps, networkLayer).then(({ data, props }) => {
// Use
// Note that we cannot use the standard
// it renders an empty/loading screen even when all the required data is already available.
// Unlike that,
// the first render, and it is important for server side rendering
// where we do not have a second render.
const reactOutput = ReactDOMServer.renderToString(
);
// To allow the data to be reused in the browser, serialize and embed it
// in the page together with the React markup.
res.render('index.ejs', {
preloadedData: JSON.stringify(data),
reactOutput
});
}).catch(next);
});
`
And here is an example of the code that can be used in the browser:
`jsx
import IsomorphicRelay from 'isomorphic-relay';
const environment = new Relay.Environment();
environment.injectNetworkLayer(new Relay.DefaultNetworkLayer('/graphql'));
// Deserialize the data preloaded on the server.
const data = JSON.parse(document.getElementById('preloadedData').textContent);
// 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.injectPreparedData(environment, data);
// 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.prepareInitialRender({ ...rootContainerProps, environment }).then(props => {
// Use
// Like on the server we cannot use the standard
// we also need to render normally right at the initial render, otherwise we would get
// React markup mismatch with the markup prerendered on the server.
ReactDOM.render(
});
``
Also see the Star Wars example.
[npm-badge]: https://img.shields.io/npm/v/isomorphic-relay.svg
[npm]: https://www.npmjs.com/package/isomorphic-relay