https://github.com/st0ffern/koa-universal-relay-router

Koa middleware for Universal/Isomorphic React + Relay rendering and routing
https://github.com/st0ffern/koa-universal-relay-router

isomorphic koa2 react relay router universal universal-javascript webapp

Last synced: about 2 months ago
JSON representation

Koa middleware for Universal/Isomorphic React + Relay rendering and routing

• Host: GitHub
• URL: https://github.com/st0ffern/koa-universal-relay-router
• Owner: st0ffern
• License: mit
• Created: 2017-02-20T09:11:56.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-10-15T23:19:27.000Z (about 7 years ago)
• Last Synced: 2024-11-13T06:52:38.555Z (about 2 months ago)
• Topics: isomorphic, koa2, react, relay, router, universal, universal-javascript, webapp
• Language: JavaScript
• Size: 6.84 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# koa-universal-relay-router

[![Greenkeeper badge](https://badges.greenkeeper.io/stoffern/koa-universal-relay-router.svg)](https://greenkeeper.io/)

Koa middleware for Universal/Isomorphic React + Relay rendering and routing

### Installation

```js

npm i -S koa-universal-relay-router

```

or

```js

yarn add koa-universal-relay-router

```

###Usage

#####client.js

```js

import Relay from 'react-relay'

import {Router, browserHistory, applyRouterMiddleware } from 'react-router'

import useRelay from 'react-router-relay' 

import {IsomorphicRelay, IsomorphicRouter} from 'koa-universal-relay-router'

const environment = new Relay.Environment();

environment.injectNetworkLayer(

    new Relay.DefaultNetworkLayer('http://example.com/graphql')

)

// Inject preloaded data from the server side

const data = JSON.parse(document.getElementById('preloaded-data').textContent);

IsomorphicRelay.injectPreparedData(environment, data)

// Find the root element

const rootElement = document.getElementById('root');

// Use the same routes object as on the server

match({ routes, history: browserHistory }, (error, redirectLocation, renderProps) => {

  IsomorphicRouter.prepareInitialRender(environment, renderProps).then(props => {

    ReactDOM.render(

      

    , rootElement);

  });

})

```

#####server.js

```js

import Koa from 'koa'

import routes from './routes'

import Relay from 'react-relay'

import {renderServer} from 'koa-universal-relay-router'

let app = new Koa()

app.use(renderServer({

    networkLayer: new Relay.DefaultNetworkLayer('http://example.com/graphql'),

    //or graphqlUrl: 'http://example.com/graphql',

    routes: routes,

    render: async (reactOutput, preloadedData, helmet) => {

        return `

            

            

                

                    

                    

                    ${helmet.title.toString()}

                    ${helmet.meta.toString()}

                    ${helmet.link.toString()}

                

                

                    
${reactOutput}

                    ${preloadedData}

                    

                

            

        `;

    }

}))

app.listen(8080, () => {

    console.log('Server is up')

})

```


#### Props

#####renderServer

| Prop | Type | Description |

|---|---|---|

|**`routes`**|`react-routes`| Routes for naviation|

|**`render`**|`function`|Function to render default client template|

|**`networkLayer`**|`Relay NetworkLayer`|Send a custom Relay NetworkLayer into the router|

|**`graphqlUrl`**|`string`|URI of the GraphQL API|