koa-isomorphic-relay
Advanced tools
Koa middleware for isomorphic React + Relay rendering and routing
Koa middleware for isomorphic React + Relay rendering and routing. This middleware implements basic server side pre-rendering, which is required for isomorphic rendering.
react + react-dom for renderingreact-helmet for document head managementrelay for data fetching and managementisomorphic-relay to make Relay isomorphic (see facebook/relay#136 and facebook/relay#558)react-router for routingreact-router-relay to add support for Relay to the routerisomorphic-relay-router to make Relay Router isomorphic$ npm install koa-isomorphic-relay
import Koa from 'koa';
import renderServer from 'koa-isomorphic-relay';
const app = new Koa();
// Place this at the end of the middleware stack as it will always render a page or throw an error
app.use(renderServer({
// URL of a GraphQL server
graphqlUrl: 'http://localhost:8080/graphql',
// Routes object from react-router-relay
routes: routes,
// Rendering function (allows for use of templating engines for example)
render: async (reactOutput, preloadedData, helmet) => {
return `
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
</head>
<body>
<div id="root">${reactOutput}</div>
<script id="preloaded-data" type="application/json">${preloadedData}</script>
<script src="/app.js"></script>
</body>
</html>
`;
}
}));
import ReactDOM from 'react-dom';
import {browserHistory} from 'react-router';
import IsomorphicRelay from 'isomorphic-relay';
import IsomorphicRouter from 'isomorphic-relay-router';
// Inject preloaded data from the server side
const data = JSON.parse(document.getElementById('preloaded-data').textContent);
IsomorphicRelay.injectPreparedData(data);
// Find the root element
const rootElement = document.getElementById('root');
// Use the same routes object as on the server
ReactDOM.render(
<IsomorphicRouter.Router routes={routes} history={browserHistory} />,
rootElement
);
FAQs
Koa middleware for isomorphic React + Relay rendering and routing
The npm package koa-isomorphic-relay receives a total of 0 weekly downloads. As such, koa-isomorphic-relay popularity was classified as not popular.
We found that koa-isomorphic-relay demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.