This is the todo-modern example updated to use universal/isomorphic/server side renderering.
How? See the diff
On the server (renderServer.js), we fetch the data needed directly by using the fetchQuery
function that is exported by react-relay
. This function returns a promise that resolves with the result of the query. We then use ReactRelayContext
to synchronously render the components to string. The Relay store is then serialized to JSON and passed to the client.
On the client (app.js), a new environment is created with the data sent from the server. Then the components are rendered using relay-query-lookup-renderer. With the lookup prop, the component will be rendered immediately with the data from the store. In a more complex app you may change the variables passed to the QueryLookupRenderer and it will fetch the data if needed.
yarn install
Set up generated files:
yarn run update-schema
yarn run build
Start a local server:
yarn start
Any changes you make to files in the js/
directory will cause the server to
automatically rebuild the app and refresh your browser.
If at any time you make changes to data/schema.js
, stop the server,
regenerate data/schema.graphql
, and restart the server:
yarn run update-schema
yarn run build
yarn start