isomorphic-relay alternatives and similar libraries
Based on the "Isomorphic Apps" category.
Alternatively, view isomorphic-relay alternatives based on common mentions on social networks and blogs.
-
isomorphic-style-loader
CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.
SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of isomorphic-relay or a related project?
README
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: 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 <IsomorphicRelay.Renderer> to render your Relay container when the data is ready.
// Note that we cannot use the standard <Relay.Renderer> because at the first render
// it renders an empty/loading screen even when all the required data is already available.
// Unlike that, <IsomorphicRelay.Renderer> in that case renders normally right at
// the first render, and it is important for server side rendering
// where we do not have a second render.
const reactOutput = ReactDOMServer.renderToString(
<IsomorphicRelay.Renderer {...props} />
);
// 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:
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 <IsomorphicRelay.Renderer> to render your Relay container when the data is ready.
// Like on the server we cannot use the standard <Relay.Renderer>, bacause here
// 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(<IsomorphicRelay.Renderer {...props} />, document.getElementById('root'));
});
Also see the [Star Wars](examples/star-wars) example.