Skip to content

robrichard/relay-modern-isomorphic-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Isomorphic Relay Modern TodoMVC

This is the todo-modern example updated to use universal/isomorphic/server side renderering.

How? See the diff

Approach

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.

Installation

yarn install

Running

Set up generated files:

yarn run update-schema
yarn run build

Start a local server:

yarn start

Developing

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

About

An example todo app using relay and server side renderering

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •