Updated dependencies to the latest stable versions

app/client/apollo.ts

@@ -1,5 +1,9 @@
-import { ApolloClient, createNetworkInterface } from 'react-apollo';
-import fetch from 'isomorphic-fetch';
+import ApolloClient from 'apollo-client';
+import { HttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { createApolloFetch } from 'apollo-fetch';
+
+const fetch = createApolloFetch({ uri: 'http://localhost:3000/graphql' });
 
 let apolloClient: any = null;
 const proc = process as any;
@@ -13,12 +17,11 @@ if (!proc.browser) {
 function create() {
   return new ApolloClient({
     ssrMode: !proc.browser, // Disables forceFetch on the server (so queries are only run once)
-    networkInterface: createNetworkInterface({
+    link: new HttpLink({
       uri: 'http://localhost:3000/graphql', // Server URL (must be absolute)
-      opts: { // Additional fetch() options like `credentials` or `headers`
-        credentials: 'same-origin'
-      }
-    })
+      credentials: 'same-origin'
+    }),
+    cache: new InMemoryCache()
   });
 }
 

app/client/data.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Provider } from 'react-redux';
 import Head from 'next/head';
 import { ApolloProvider, getDataFromTree } from 'react-apollo';
 import { initApollo } from './apollo';
@@ -31,17 +32,17 @@ export default (ComposedComponent) => {
       // and extract the resulting data
       if (!proc.browser) {
         const apollo = initApollo();
-        const redux = initRedux(apollo);
+        const redux = initRedux();
         // Provide the `url` prop data in case a GraphQL query uses it
         const url = {query: ctx.query, pathname: ctx.pathname};
 
         try {
           // Run all GraphQL queries
           await getDataFromTree(
-            // No need to use the Redux Provider
-            // because Apollo sets up the store for us
-            <ApolloProvider client={apollo} store={redux}>
-              <ComposedComponent url={url} {...composedInitialProps} />
+            <ApolloProvider client={apollo}>
+              <Provider store={redux}>
+                <ComposedComponent url={url} {...composedInitialProps} />
+              </Provider>
             </ApolloProvider>
           );
         } catch (error) {
@@ -76,15 +77,15 @@ export default (ComposedComponent) => {
       const { serverState }: any = this.props;
 
       this.apollo = initApollo();
-      this.redux = initRedux(this.apollo, serverState);
+      this.redux = initRedux(serverState);
     }
 
     public render() {
       return (
-        // No need to use the Redux Provider
-        // because Apollo sets up the store for us
-        <ApolloProvider client={this.apollo} store={this.redux}>
-          <ComposedComponent {...this.props} />
+        <ApolloProvider client={this.apollo}>
+          <Provider store={this.redux}>
+            <ComposedComponent {...this.props} />
+          </Provider>
         </ApolloProvider>
       );
     }

app/client/queries/fetchMarvelCharacters.ts

@@ -1,4 +1,4 @@
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 export const fetchMarvelCharacters = gql`
   query($endpoint: String!, $params: MarvelParams) {

app/client/queries/fetchPosts.ts

@@ -1,4 +1,4 @@
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 export const fetchPosts = gql`
   query {

app/client/store.ts

@@ -8,17 +8,13 @@ let reduxStore = null;
 const proc = process as any;
 const sagaMiddleware = createSagaMiddleware();
 
-function create(apollo, initialState) {
+function create(initialState) {
   const middlewares = [
-    sagaMiddleware,
-    apollo.middleware()
+    sagaMiddleware
   ];
 
   const store: any = createStore(
-    combineReducers({
-      ...reducers,
-      apollo: apollo.reducer()
-    }),
+    combineReducers({...reducers}),
     initialState,
     composeWithDevTools(applyMiddleware(...middlewares))
   );
@@ -27,14 +23,14 @@ function create(apollo, initialState) {
   return store;
 }
 
-export function initRedux(apollo, initialState = {}) {
+export function initRedux(initialState = {}) {
   if (!proc.browser) {
-    return create(apollo, initialState);
+    return create(initialState);
   }
 
   // Reuse store on the client-side
   if (!reduxStore) {
-    reduxStore = create(apollo, initialState);
+    reduxStore = create(initialState);
   }
 
   return reduxStore;

app/components/Counter/tests/component.test.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, configure } from 'enzyme';
 import { Counter } from '../component';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
 
 const counter = shallow(<Counter />);
 

app/components/Footer/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
 const Foot = styled.footer`
   position: absolute;

app/components/Header/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Link from 'next/link';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
 const Nav = styled.nav`
   display: flex;

app/components/Layout/index.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
 import { Header } from '../Header';
 import { Footer } from '../Footer';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
-const Layout: React.StatelessComponent<any> = ({ children }): JSX.Element => (
+interface IProps {
+  children: React.ReactNode;
+}
+
+const Layout: React.StatelessComponent<IProps> = ({ children }): JSX.Element => (
   <section>
     <Header />
     <Content>

app/components/Spinner/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import styled, { keyframes } from 'styled-components';
+const styled = require('styled-components').default;
+const { keyframes } = require('styled-components');
 
 const pulse = keyframes`
   0%, 40%, 100% { transform: scaleY(0.4) }

app/modules/Marvel/components/MarvelHero.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
 const Header = styled.h1`
   text-align: center;

app/modules/Marvel/components/MarvelHeroes.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 import MarvelPager from '../containers/MarvelPager';
 
 const { Link } = require('client/routes');

app/modules/Marvel/components/MarvelLayout.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 import MarvelSearchHero from '../containers/MarvelSearchHero';
 import MarvelHeroes from '../containers/MarvelHeroes';
 

app/modules/Marvel/components/MarvelPager.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
 interface IProps {
   total: number;

app/modules/Marvel/components/MarvelSearchHero.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
 interface IProps {
   search: string;

app/modules/SupaModule/components/SupaItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
 interface IProps {
   id: number;

app/modules/SupaModule/components/SupaLayout.tsx

@@ -3,7 +3,7 @@ import SupaAddItem from '../containers/SupaAddItem';
 import SupaItemsRestore from '../containers/SupaItemsRestore';
 import SupaItem from '../containers/SupaItem';
 import SupaItemSearch from '../containers/SupaItemSearch';
-import styled from 'styled-components';
+const styled = require('styled-components').default;
 
 interface IProps {
   list: [object];

app/pages/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import styled from 'styled-components';
+// Require styled to avoid the issue https://github.com/styled-components/styled-components/issues/1168 on page reload
+const styled = require('styled-components').default;
 import Layout from 'components/Layout';
 
 const Image = styled.div`

app/pages/tests/about.test.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, configure } from 'enzyme';
 import About from '../about';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
 
 describe('About page', () => {
   it('should render <h1> tag with text', () => {

app/pages/tests/component.test.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, configure } from 'enzyme';
 import Component from '../component';
 import Counter from '../../components/Counter';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
 
 describe('Component page', () => {
   it('should render <Counter /> component', () => {

app/pages/tests/index.test.tsx

@@ -1,7 +1,10 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, configure } from 'enzyme';
 import Home from '../index';
 import Layout from '../../components/Layout';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
 
 describe('Home page', () => {
   it('should render Layout wrapper', () => {

package.json

@@ -1,14 +1,14 @@
 {
   "name": "react-hipstaplate",
-  "version": "0.0.3",
+  "version": "1.0.0",
   "description": "Modern ReactJS/express full-stack boilerplate",
   "repository": {
     "type": "git",
     "url": "https://github.com/DashBouquet/react-hipstaplate.git"
   },
   "engines": {
     "npm": ">=3",
-    "node": "6.11.1"
+    "node": ">=6"
   },
   "author": "Vitali Shalak",
   "license": "MIT",
@@ -39,57 +39,67 @@
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
     },
-    "testRegex": "tests/.*\\.test\\.(j|t)sx?$"
+    "testRegex": "tests/.*\\.test\\.(j|t)sx?$",
+    "setupFiles": [
+      "raf/polyfill"
+    ]
   },
   "dependencies": {
-    "@types/enzyme": "^2.8.4",
+    "@types/enzyme": "^3.1.1",
     "@types/jasmine": "^2.5.53",
-    "@types/jest": "^20.0.6",
+    "@types/jest": "^21.1.5",
     "@types/next": "^2.4.2",
-    "@types/ramda": "^0.24.5",
+    "@types/ramda": "^0.25.6",
     "@types/react": "^16.0.0",
     "@types/react-redux": "^5.0.2",
-    "@types/recompose": "^0.23.2",
+    "@types/recompose": "^0.24.2",
+    "apollo-cache-inmemory": "1.1.1",
+    "apollo-client": "^2.x.x",
+    "apollo-fetch": "^0.6.0",
+    "apollo-link-http": "^1.x.x",
     "body-parser": "^1.17.2",
     "cross-env": "^5.0.1",
     "express": "^4.15.3",
     "express-session": "^1.15.4",
-    "graphql": "^0.10.5",
-    "graphql-server-express": "^1.0.5",
-    "graphql-tools": "^1.1.0",
+    "graphql": "^0.11.7",
+    "graphql-server-express": "^1.2.0",
+    "graphql-tag": "^2.5.0",
+    "graphql-tools": "2.7.2",
     "isomorphic-fetch": "^2.2.1",
-    "next": "^3.0.3",
+    "next": "^4.1.3",
     "next-redux-saga": "^1.0.1",
     "next-redux-wrapper": "^1.3.2",
     "next-routes": "^1.0.40",
-    "ramda": "^0.24.1",
-    "react": "^15.6.1",
-    "react-apollo": "^1.4.10",
-    "react-dom": "^15.6.1",
+    "raf": "^3.4.0",
+    "ramda": "^0.25.0",
+    "react": "^16.0.0",
+    "react-apollo": "^2.0.0",
+    "react-dom": "^16.0.0",
     "react-redux": "^5.0.5",
-    "recompose": "^0.24.0",
+    "recompose": "^0.26.0",
     "redux": "^3.7.2",
-    "redux-saga": "^0.15.6",
-    "styled-components": "^2.1.1"
+    "redux-saga": "^0.16.0",
+    "styled-components": "^2.2.2"
   },
   "devDependencies": {
     "@types/node": "^8.0.17",
-    "babel-jest": "^20.0.3",
-    "babel-plugin-module-resolver": "^2.7.1",
-    "babel-plugin-styled-components": "^1.1.7",
+    "babel-jest": "^21.2.0",
+    "babel-plugin-module-resolver": "^3.0.0",
+    "babel-plugin-styled-components": "^1.2.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
     "concurrently": "^3.5.0",
     "copy-webpack-plugin": "^4.0.1",
-    "enzyme": "^2.9.1",
-    "jest": "^20.0.4",
-    "jest-cli": "^20.0.4",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.2",
+    "jest": "^21.2.1",
+    "jest-cli": "^21.2.1",
     "nodemon": "^1.11.0",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.0.0",
     "redux-devtools-extension": "^2.13.2",
     "rimraf": "^2.6.1",
-    "ts-jest": "^20.0.8",
+    "ts-jest": "^21.1.4",
     "tslint": "^5.5.0",
     "tslint-react": "^3.2.0",
-    "typescript": "^2.4.2"
+    "typescript": "^2.6.1"
   }
 }

tsconfig.json

@@ -8,7 +8,12 @@
     "inlineSources": false,
     "preserveConstEnums": true,
     "moduleResolution": "node",
-    "strictNullChecks": true,
+
+    /* 
+      This is requred to resolve https://github.com/apollographql/apollo-client/issues/2503 
+      Will be removed after the issue is resolved
+    */
+    "strictNullChecks": false,
     "skipLibCheck": true,
     "allowJs": false,
     "experimentalDecorators": true,