Wrap app in Found Router component

Author: spiegela

package.json

@@ -20,6 +20,7 @@
   },
   "homepage": "git+https://github.com/spiegela/react-relay-modern-starter-kit.git",
   "dependencies": {
+    "found": "^0.3.4",
     "found-relay": "next",
     "graphql-relay": "^0.5.2",
     "node-sass": "^4.5.3",

src/Components/App.js

@@ -3,43 +3,15 @@ import {
   graphql,
   QueryRenderer
 } from 'react-relay'
-
-import environment from '../Environment'
 import Layout from './Layout'
 import WidgetList from './WidgetList'
 
-const query = graphql`
-query AppQuery {
-  viewer {
-    ...Layout_viewer
-    ...WidgetList_viewer
-  }
-}`
-
 export default class App extends Component {
   render() {
     return(
-      <QueryRenderer
-      environment={environment}
-      query={query}
-      render={
-        ({error, props}) => {
-          if (error) {
-            return <div>{error.message}</div>;
-          } else if (props) {
-            return (
-              <Layout viewer={props.viewer}>
-                <WidgetList viewer={props.viewer}/>
-              </Layout>
-            );
-          } else {
-            return(
-              <div>Loading....</div>
-            );
-          }
-        }
-      }
-      />
-    );
+        <Layout viewer={this.props.viewer}>
+          <WidgetList viewer={this.props.viewer}/>
+        </Layout>
+      );
   }
 }

src/Components/__generated__/WidgetList_viewer.graphql.js

@@ -0,0 +1,24 @@
+import React, {Component} from 'react'
+import BrowserProtocol from 'farce/lib/BrowserProtocol'
+import queryMiddleware from 'farce/lib/queryMiddleware'
+import createFarceRouter from 'found/lib/createFarceRouter'
+import createRender from 'found/lib/createRender'
+import {Resolver} from 'found-relay'
+
+import Routes from './Routes'
+import environment from './Environment'
+
+const FarceRouter = createFarceRouter({
+  historyProtocol: new BrowserProtocol(),
+  historyMiddlewares: [queryMiddleware],
+  routeConfig: Routes,
+  render: createRender({}),
+})
+
+export default class Router extends Component {
+  render() {
+    return(
+      <FarceRouter resolver={new Resolver(environment)}/>
+    )
+  }
+}

src/Router.js

@@ -0,0 +1,18 @@
+import makeRouteConfig from 'found/lib/makeRouteConfig'
+import Route from 'found/lib/Route'
+import React from 'react'
+import {graphql} from 'react-relay'
+
+import App from './Components/App'
+
+const query = graphql`
+query routes_App_Query {
+  viewer {
+    ...Layout_viewer
+    ...WidgetList_viewer
+  }
+}`
+
+export default makeRouteConfig(
+  <Route path="/" Component={App} query={query} />,
+)

src/Routes.js

@@ -2,9 +2,8 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 
-import App from './Components/App'
-
 import styles from './index.scss'
+import Router from './Router'
 
 const render = Component => {
   ReactDOM.render(
@@ -15,8 +14,8 @@ const render = Component => {
   )
 }
 
-render(App)
+render(Router)
 
 if (module.hot) {
-  module.hot.accept('./Components/App', () => { render(App) })
+  module.hot.accept('./Router', () => { render(Router) })
 }