Graphql & React Router 4

.babelrc

@@ -3,8 +3,9 @@
   "plugins": [
     "transform-runtime",
     "transform-decorators-legacy",
-    "transform-react-display-name",
-    ["system-import-transformer", {"modules": "common"}]
+    "transform-react-display-name", ["system-import-transformer", {
+      "modules": "common"
+    }]
   ],
   "env": {
     "development": {

bin/server.js

@@ -1,6 +1,7 @@
 require('dotenv').load();
 require('app-module-path').addPath(__dirname);
 require('app-module-path').addPath('../src');
+require('isomorphic-fetch');
 
 var fs = require('fs');
 var path = require('path');

package.json

@@ -17,11 +17,12 @@
     "build:server": "babel ./src -d ./dist -D",
     "build:client": "webpack --config ./webpack/prod.config.js",
     "validate": "npm ls",
-    "analyze:build": "env NODE_ENV=production webpack --json --config ./webpack/prod.config.js  > bundle-stats.json",
-    "analyze:json": "webpack-bundle-size-analyzer bundle-stats.json",
+    "analyze:build": "env NODE_ENV=production webpack --profile --json --config ./webpack/prod.config.js  > bundle-stats.json",
+    "analyze:json": "webpack-bundle-analyzer bundle-stats.json",
     "lint:fix": "npm run test:dev:lint -- --fix",
     "prettier": "prettier --single-quote --write",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "postinstall": "rm -rf node_modules/react-apollo/node_modules/react-dom"
   },
   "pre-commit": [
     "test:stylelint",
@@ -42,13 +43,15 @@
     "node": ">= 6.3.0"
   },
   "dependencies": {
+    "apollo-client": "^1.9.0-0",
     "app-module-path": "1.0.2",
     "autoprefixer": "6.6.1",
     "autoprefixer-loader": "3.2.0",
     "babel-cli": "6.11.4",
     "babel-core": "^6.24.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-add-module-exports": "0.1.4",
+    "babel-plugin-import-inspector": "^2.0.0",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-system-import-transformer": "^3.1.0",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
@@ -90,49 +93,54 @@
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "0.8.5",
     "fontfaceobserver": "1.7.3",
+    "graphql-tag": "^2.4.2",
     "history": "^3.0.0",
     "html-pdf": "^2.1.0",
     "html-webpack-plugin": "1.7.0",
     "http-proxy": "1.14.0",
     "humps": "2.0.0",
     "image-webpack-loader": "3.1.0",
     "imports-loader": "0.6.5",
+    "isomorphic-fetch": "^2.2.1",
     "json-loader": "0.5.4",
+    "loadable-components": "^0.2.0",
     "morgan": "1.7.0",
-    "node-sass": "4.1.1",
+    "node-sass": "^4.5.3",
     "normalizr": "3.0.2",
     "postcss-loader": "0.9.1",
     "precss": "1.4.0",
     "pretty-error": "2.0.0",
     "promise": "7.1.1",
+    "prop-types": "^15.5.10",
     "proxy-middleware": "0.14.0",
-    "qs": "6.2.1",
+    "qs": "^6.5.0",
     "quran-components": "^0.0.80",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
-    "react": "15.4.1",
+    "react": "^15.6.1",
     "react-a11y": "0.3.3",
     "react-addons-create-fragment": "15.4.1",
+    "react-apollo": "^1.4.3",
     "react-bootstrap": "0.30.7",
     "react-cookie": "1.0.4",
-    "react-dom": "15.4.1",
+    "react-dom": "^15.6.1",
     "react-helmet": "3.1.0",
     "react-hot-loader": "next",
     "react-inlinesvg": "0.5.4",
     "react-intl": "2.1.5",
-    "react-loadable": "^3.3.1",
+    "react-loadable": "^4.0.3",
     "react-metrics": "1.2.1",
     "react-paginate": "4.1.0",
     "react-redux": "5.0.1",
-    "react-router": "3.0.0",
-    "react-router-bootstrap": "0.20.1",
+    "react-router": "^4.1.1",
+    "react-router-bootstrap": "^0.24.2",
+    "react-router-dom": "^4.1.1",
     "react-router-redux": "4.0.7",
-    "react-router-scroll": "0.2.1",
     "react-scroll": "1.2.0",
     "react-share": "1.11.0",
     "react-sidebar": "2.2.1",
+    "react-virtualized": "^9.9.0",
     "redux": "3.5.2",
-    "redux-connect": "5.0.0",
     "reselect": "2.5.3",
     "resolve-url": "0.2.1",
     "resolve-url-loader": "1.6.1",
@@ -148,7 +156,6 @@
     "url-loader": "0.5.7",
     "webpack": "^2.5.1",
     "webpack-dev-middleware": "^1.10.2",
-    "webpack-dev-server": "^2.4.5",
     "webpack-isomorphic-tools": "2.5.7",
     "winston": "1.1.2"
   },
@@ -202,7 +209,7 @@
     "stylelint-webpack-plugin": "0.2.0",
     "webpack-bundle-analyzer": "2.2.1",
     "webpack-dashboard": "^0.4.0",
-    "webpack-dev-server": "2.1.0-beta.0",
+    "webpack-dev-server": "^2.4.5",
     "webpack-hot-middleware": "2.12.2"
   }
 }

src/client.js

@@ -2,28 +2,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import reactCookie from 'react-cookie';
-import Router from 'react-router/lib/Router';
-import match from 'react-router/lib/match';
-import browserHistory from 'react-router/lib/browserHistory';
-import applyRouterMiddleware from 'react-router/lib/applyRouterMiddleware';
-import useScroll from 'react-router-scroll';
-import { ReduxAsyncConnect } from 'redux-connect';
-import { syncHistoryWithStore } from 'react-router-redux';
+
 import { AppContainer } from 'react-hot-loader';
-import { ThemeProvider } from 'styled-components';
+import { loadComponents } from 'loadable-components';
 
-import debug from 'debug';
+import debug from './helpers/debug';
 
 import config from './config';
-import theme from './theme';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
-import routes from './routes';
 import Root from './containers/Root';
+import createClient from './graphql/client';
 
-const client = new ApiClient();
-const store = createStore(browserHistory, client, window.reduxData);
-const history = syncHistoryWithStore(browserHistory, store);
+const api = new ApiClient();
+// eslint-disable-next-line
+const client = createClient({ initialState: window.__APOLLO_STATE__ });
+const store = createStore(client, api, window.reduxData);
 
 try {
   Raven.config(config.sentryClient).install();
@@ -45,49 +39,23 @@ window.clearCookies = () => {
   reactCookie.remove('smartbanner-installed');
 };
 
-match(
-  { history, routes: routes(store) },
-  (error, redirectLocation, renderProps) => {
-    const component = (
-      <ThemeProvider theme={theme}>
-        <Router
-          {...renderProps}
-          render={props => (
-            <ReduxAsyncConnect
-              {...props}
-              helpers={{ client }}
-              render={applyRouterMiddleware(useScroll())}
-            />
-          )}
-        />
-      </ThemeProvider>
-    );
-
-    const mountNode = document.getElementById('app');
+const mountNode = document.getElementById('app');
 
-    debug('client', 'React Rendering');
+loadComponents().then(() => {
+  const render = (component, time) => {
+    ReactDOM.render(<AppContainer>{component}</AppContainer>, mountNode, () => {
+      debug('client', `React Rendered ${time} time`);
+    });
+  };
 
-    ReactDOM.render(
-      <AppContainer>
-        <Root component={component} store={store} />
-      </AppContainer>,
-      mountNode,
-      () => {
-        debug('client', 'React Rendered');
-      }
-    );
+  render(<Root client={client} store={store} />, 'first');
 
-    if (module.hot) {
-      module.hot.accept('./containers/Root', () => {
-        const NextRoot = require('./containers/Root'); // eslint-disable-line global-require
+  if (module.hot) {
+    debug('client:hot', 'Activated');
 
-        ReactDOM.render(
-          <AppContainer>
-            <NextRoot store={store} component={component} />
-          </AppContainer>,
-          document.getElementById('root')
-        );
-      });
-    }
+    module.hot.accept('./containers/Root', () => {
+      debug('client:hot', 'Reload');
+      render(<Root client={client} store={store} />, 'second');
+    });
   }
-);
+});