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
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.