{"id":13772196,"url":"https://github.com/denvned/isomorphic-relay-router","last_synced_at":"2025-07-17T07:36:44.038Z","repository":{"id":57160696,"uuid":"45913712","full_name":"denvned/isomorphic-relay-router","owner":"denvned","description":"Adds server side rendering support to react-router-relay","archived":false,"fork":false,"pushed_at":"2017-10-05T14:55:31.000Z","size":77,"stargazers_count":138,"open_issues_count":3,"forks_count":26,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-09T10:50:23.009Z","etag":null,"topics":["isomorphic","isomorphic-relay","react-router","relay"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/denvned.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-10T13:32:15.000Z","updated_at":"2025-07-07T12:27:12.000Z","dependencies_parsed_at":"2022-08-24T08:11:09.172Z","dependency_job_id":null,"html_url":"https://github.com/denvned/isomorphic-relay-router","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/denvned/isomorphic-relay-router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denvned%2Fisomorphic-relay-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denvned%2Fisomorphic-relay-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denvned%2Fisomorphic-relay-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denvned%2Fisomorphic-relay-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denvned","download_url":"https://codeload.github.com/denvned/isomorphic-relay-router/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denvned%2Fisomorphic-relay-router/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265578071,"owners_count":23791287,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["isomorphic","isomorphic-relay","react-router","relay"],"created_at":"2024-08-03T17:01:01.198Z","updated_at":"2025-07-17T07:36:44.022Z","avatar_url":"https://github.com/denvned.png","language":"JavaScript","funding_links":[],"categories":["Libraries \u0026 Packages"],"sub_categories":[],"readme":"Isomorphic react-router-relay [![npm version][npm-badge]][npm]\n=============================\nAdds server side rendering support to\n[react-router-relay](https://github.com/relay-tools/react-router-relay) using\n[isomorphic-relay](https://github.com/denvned/isomorphic-relay).\n\nInstallation\n------------\n\n    npm install -S isomorphic-relay isomorphic-relay-router\n\nHow to use\n----------\n\nCreate a Relay network layer on the server.\nAnd if you are using `Relay.DefaultNetworkLayer`, specify the full url to the GraphQL endpoint:\n```javascript\nconst GRAPHQL_URL = `http://localhost:8080/graphql`;\n\nconst networkLayer = new Relay.DefaultNetworkLayer(GRAPHQL_URL);\n```\n\nWhen processing a request **on the server**, get `renderProps` using `match` function from\n*react-router* (see\n[here](https://github.com/reactjs/react-router/blob/v2.3.0/docs/guides/ServerRendering.md)),\nprepare the data using `IsomorphicRouter.prepareData`, then render React markup using\n`IsomorphicRouter.render` (pass the `props` returned by `IsomorphicRouter.prepareData`), and send\nthe React output along with the data to the client:\n```javascript\nimport IsomorphicRouter from 'isomorphic-relay-router';\n\napp.get('/*', (req, res, next) =\u003e {\n  match({routes, location: req.originalUrl}, (error, redirectLocation, renderProps) =\u003e {\n    if (error) {\n      next(error);\n    } else if (redirectLocation) {\n      res.redirect(302, redirectLocation.pathname + redirectLocation.search);\n    } else if (renderProps) {\n      IsomorphicRouter.prepareData(renderProps, networkLayer).then(render).catch(next);\n    } else {\n      res.status(404).send('Not Found');\n    }\n\n    function render({data, props}) {\n      const reactOutput = ReactDOMServer.renderToString(IsomorphicRouter.render(props));\n\n      res.render(path.resolve(__dirname, '..', 'views', 'index.ejs'), {\n        preloadedData: JSON.stringify(data),\n        reactOutput\n      });\n    }\n  });\n});\n```\n\nOn page load **in the browser**, create an instance of `Relay.Environment`, inject an Relay network\nlayer to it. Get `renderProps` using `match` function from *react-router*, inject the prepared data\nto the Relay store using `IsomorphicRelay.injectPreparedData`, then prepare initial render using\n`IsomorphicRelay.prepareInitialRender`, and render React using `Router` from *react-router* (pass\nthe `props` returned by `IsomorphicRouter.prepareInitialRender`):\n```javascript\nimport IsomorphicRouter from 'isomorphic-relay-router';\n\nconst environment = new Relay.Environment();\n\nenvironment.injectNetworkLayer(new Relay.DefaultNetworkLayer('/graphql'));\n\nconst data = JSON.parse(document.getElementById('preloadedData').textContent);\n\nIsomorphicRelay.injectPreparedData(environment, data);\n\nconst rootElement = document.getElementById('root');\n\n// use the same routes object as on the server\nmatch({routes, history: browserHistory}, (error, redirectLocation, renderProps) =\u003e {\n  IsomorphicRouter.prepareInitialRender(environment, renderProps).then(props =\u003e {\n    ReactDOM.render(\u003cRouter {...props} /\u003e, rootElement);\n  });\n});\n```\n\nExample\n-------\nSee [here](examples/todo).\n\n[npm-badge]: https://img.shields.io/npm/v/isomorphic-relay-router.svg\n[npm]: https://www.npmjs.com/package/isomorphic-relay-router\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenvned%2Fisomorphic-relay-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenvned%2Fisomorphic-relay-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenvned%2Fisomorphic-relay-router/lists"}