Isomorphic react-router-relay
Adds server side rendering support to react-router-relay using isomorphic-relay.
Installation
npm install -S isomorphic-relay isomorphic-relay-router
How to use
Create a Relay network layer on the server.
And if you are using Relay.DefaultNetworkLayer
, specify the full url to the GraphQL endpoint:
const GRAPHQL_URL = `http://localhost:8080/graphql`; const networkLayer = GRAPHQL_URL;
When processing a request on the server, get renderProps
using match
function from
react-router (see
here),
prepare the data using IsomorphicRouter.prepareData
, then render React markup using
IsomorphicRouter.render
(pass the props
returned by IsomorphicRouter.prepareData
), and send
the React output along with the data to the client:
; app;
On page load in the browser, create an instance of Relay.Environment
, inject an Relay network
layer to it. Get renderProps
using match
function from react-router, inject the prepared data
to the Relay store using IsomorphicRelay.injectPreparedData
, then prepare initial render using
IsomorphicRelay.prepareInitialRender
, and render React using Router
from react-router (pass
the props
returned by IsomorphicRouter.prepareInitialRender
):
; const environment = ; environment; const data = JSON; IsomorphicRelay; const rootElement = document; // use the same routes object as on the server;
Example
See here.