denvned / Isomorphic Relay
Licence: bsd-2-clause
Adds server side rendering support to React Relay
Stars: ✭ 247
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Isomorphic Relay
universal-react-relay-starter-kit
A starter kit for React in combination with Relay including a GraphQL server, server side rendering, code splitting, i18n, SEO.
Stars: ✭ 14 (-94.33%)
Mutual labels: relay, isomorphic
isomorphic-relay-boilerplate
No description or website provided.
Stars: ✭ 30 (-87.85%)
Mutual labels: relay, isomorphic
server
Serve one or more react apps! - Custom routes, HotReloading, Authenticated Apps/routes, Relay, Webpack..
Stars: ✭ 20 (-91.9%)
Mutual labels: relay, isomorphic
React App
Create React App with server-side code support
Stars: ✭ 614 (+148.58%)
Mutual labels: relay, isomorphic
isomorphic-relay-app
Example isomorphic React-Relay-(Modern / Classic)-Router app and helper lib that connects to Artsy's GraphQL service
Stars: ✭ 13 (-94.74%)
Mutual labels: relay, isomorphic
Isomorphic Relay Router
Adds server side rendering support to react-router-relay
Stars: ✭ 141 (-42.91%)
Mutual labels: relay, isomorphic
Ws Tcp Relay
A simple relay between WebSocket clients and TCP servers
Stars: ✭ 186 (-24.7%)
Mutual labels: relay
React Isomorphic Starterkit
Create an isomorphic React app in less than 5 minutes
Stars: ✭ 2,326 (+841.7%)
Mutual labels: isomorphic
Scalable React Typescript Boilerplate
⭐️ Scalable micro-framework featuring React and TypeScript
Stars: ✭ 174 (-29.55%)
Mutual labels: isomorphic
Use Ssr
☯️ React hook to determine if you are on the server, browser, or react native
Stars: ✭ 230 (-6.88%)
Mutual labels: isomorphic
Hapi Universal Redux
DEPRECATED: Create an universal React and Redux app in less than 5 minutes!
Stars: ✭ 215 (-12.96%)
Mutual labels: isomorphic
Django Graphql Auth
Django registration and authentication with GraphQL.
Stars: ✭ 200 (-19.03%)
Mutual labels: relay
Graphql.js
A Simple and Isomorphic GraphQL Client for JavaScript
Stars: ✭ 2,206 (+793.12%)
Mutual labels: relay
React Pages
A complete solution for building a React/Redux application: routing, page preloading, (optional) server-side rendering, asynchronous HTTP requests, document metadata, etc.
Stars: ✭ 182 (-26.32%)
Mutual labels: isomorphic
Universal React Router4
Demo app showing how to use react-router v4 for server- and client-side rendering
Stars: ✭ 216 (-12.55%)
Mutual labels: isomorphic
Express Es6 Template Engine
Rendering engine for Express that uses ES6 javascript string templates as syntax.
Stars: ✭ 175 (-29.15%)
Mutual labels: isomorphic
Isomorphic Ws
Isomorphic implementation of WebSocket (https://www.npmjs.com/package/ws)
Stars: ✭ 215 (-12.96%)
Mutual labels: isomorphic
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 example.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].