Updated Apollo to version 2.0.0

Author: clintonwoo

package.json

@@ -30,6 +30,9 @@
     "graphql"
   ],
   "dependencies": {
+    "apollo-cache-inmemory": "^1.0.0",
+    "apollo-client": "^2.0.1",
+    "apollo-link-http": "^1.0.0",
     "apollo-server-express": "^1.1.2",
     "babel-runtime": "^6.26.0",
     "body-parser": "^1.17.2",
@@ -41,6 +44,7 @@
     "express-session": "^1.15.5",
     "firebase": "^4.3.1",
     "graphql": "^0.10.5",
+    "graphql-tag": "^2.5.0",
     "graphql-tools": "^1.2.1",
     "isomorphic-fetch": "^2.2.1",
     "lru-cache": "^4.1.1",
@@ -49,7 +53,7 @@
     "passport-local": "^1.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
-    "react-apollo": "^1.4.15",
+    "react-apollo": "^2.0.0",
     "react-dom": "^16.0.0",
     "react-redux": "^5.0.6",
     "react-render-html": "^0.5.1",

src/components/container/NewsFeedWithApolloRenderer.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import NewsFeed from '../presentational/NewsFeed';
 import LoadingSpinner from '../presentational/LoadingSpinner';
 
-export default ({ data: { loading, error, feed }, options }) => {
+export default ({ data: { loading, error, feed }, data, options }) => {
   if (error) return <tr><td>Error loading news items.</td></tr>;
   if (feed && feed.length) return <NewsFeed newsItems={feed} {...options} />;
   return <LoadingSpinner />;

src/components/presentational/Comment.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 import Link from 'next/link';
 import renderHTML from 'react-render-html';
 

src/components/presentational/Comments.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import Comment from './Comment';
 

src/components/presentational/NewsDetail.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { gql, graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
 import url from 'url';

src/components/presentational/NewsFeed.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import NewsTitle from '../container/NewsTitleWithData';
 import NewsDetail from '../container/NewsDetailWithData';

src/components/presentational/NewsTitle.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 import Link from 'next/link';
 import PropTypes from 'prop-types';
 import url from 'url';

src/data/mutations/hideNewsItem.js

@@ -1,4 +1,4 @@
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 export default gql`
   mutation HideNewsItem($id: Int!) {

src/data/mutations/submitNewsItem.js

@@ -1,4 +1,4 @@
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 import NewsFeed from '../../components/presentational/NewsFeed';
 
 export default gql`

src/data/mutations/upvoteNewsItem.js

@@ -1,4 +1,4 @@
-import { gql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 export default gql`
   mutation UpvoteNewsItem($id: Int!) {

src/data/queries/meQuery.js

@@ -1,6 +1,4 @@
-import {
-  gql,
-} from 'react-apollo';
+import gql from 'graphql-tag';
 
 export default gql`
   query User {

src/helpers/initApollo.js

@@ -1,4 +1,7 @@
-import { ApolloClient, createNetworkInterface } from 'react-apollo';
+import { ApolloClient } from 'apollo-client';
+import { createHttpLink } from 'apollo-link-http';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+
 import fetch from 'isomorphic-fetch';
 import debug from 'debug';
 
@@ -18,19 +21,17 @@ if (!process.browser) {
 
 function create(initialState, { getToken }) {
   return new ApolloClient({
-    initialState,
     ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
-    networkInterface: createNetworkInterface({
-      uri: GRAPHQL_URL, // Server URL (must be absolute)
-      opts: {
-        // Additional fetch() options like `credentials` or `headers`
-        credentials: 'same-origin',
-        headers: {
-          // HTTP Header:  Cookie: <cookiename>=<cookievalue>
-          Cookie: `${'connect.sid'}=${getToken()['connect.sid']}`,
-        },
+    link: createHttpLink({
+      uri: GRAPHQL_URL,
+      credentials: 'same-origin',
+      headers: {
+        // HTTP Header:  Cookie: <cookiename>=<cookievalue>
+        Cookie: `${'connect.sid'}=${getToken()['connect.sid']}`,
       },
     }),
+    cache: new InMemoryCache().restore(initialState || {}),
+    connectToDevTools: process.browser,
   });
 }
 

src/helpers/withData.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { ApolloProvider, getDataFromTree } from 'react-apollo';
 import cookie from 'cookie';
 import PropTypes from 'prop-types';
-import { ApolloProvider, getDataFromTree } from 'react-apollo';
 import debug from 'debug';
 
 import initApollo from './initApollo';
@@ -28,7 +28,7 @@ export default (ComposedComponent) => {
     }
 
     static async getInitialProps(context) {
-      let serverState = {};
+      let serverState = { apollo: {} };
 
       // Setup a server-side one-time-use apollo client for initial props and
       // rendering (on server)
@@ -64,20 +64,17 @@ export default (ComposedComponent) => {
 
         await getDataFromTree(app);
 
-        // Extract query data from the Apollo's store
-        const state = apollo.getInitialState();
-
         serverState = {
           apollo: { // Make sure to only include Apollo's data state
-            data: state.data,
+            data: apollo.cache.extract(), // Extract query data from the Apollo's store
           },
         };
       }
 
       return {
         serverState,
         ...composedInitialProps,
-      }
+      };
     }
 
     constructor(props) {
@@ -86,7 +83,7 @@ export default (ComposedComponent) => {
       // render within `getInitialProps()` above (since the entire prop tree
       // will be initialized there), meaning the below will only ever be
       // executed on the client.
-      this.apollo = initApollo(this.props.serverState, {
+      this.apollo = initApollo(this.props.serverState.apollo.data, {
         getToken: () => parseCookies(), // ['connect.sid'],
       });
     }
@@ -96,7 +93,7 @@ export default (ComposedComponent) => {
         <ApolloProvider client={this.apollo}>
           <ComposedComponent {...this.props} />
         </ApolloProvider>
-      )
+      );
     }
-  }
-}
+  };
+};

src/layouts/Blank.js

@@ -14,11 +14,7 @@ const Blank = props => (
   </div>
 );
 Blank.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-    PropTypes.string,
-  ]).isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default Blank;

src/layouts/Main.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Head from 'next/head';
-import {
-  graphql,
-} from 'react-apollo';
+import { graphql } from 'react-apollo';
 
 import Header from '../components/presentational/Header';
 import Footer from '../components/presentational/Footer';
@@ -43,10 +41,7 @@ Main.defaultProps = {
   me: null,
 };
 Main.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired,
+  children: PropTypes.node.isRequired,
   isNavVisible: PropTypes.bool,
   isUserVisible: PropTypes.bool,
   isFooterVisible: PropTypes.bool,

src/layouts/Notice.js

@@ -30,10 +30,7 @@ const Notice = props => (
   </center>
 );
 Notice.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.arrayOf(PropTypes.element),
-  ]).isRequired,
+  children: PropTypes.node.isRequired,
 };
 
 export default Notice;

src/pages/ask.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { graphql, gql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
 import Main from '../layouts/Main';

src/pages/best.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { graphql, gql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import Main from '../layouts/Main';
 import NewsFeed from '../components/presentational/NewsFeed';

src/pages/favorites.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  graphql,
-  gql,
-} from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import Main from '../layouts/Main';
 import NewsFeed from '../components/presentational/NewsFeed';

src/pages/forgot.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
 import Router from 'next/router';
-import { gql, graphql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
 import Blank from '../layouts/Blank';

src/pages/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { graphql, gql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
 import Main from '../layouts/Main';

src/pages/item.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { graphql, gql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import Main from '../layouts/Main';
 import NewsItem from '../components/container/NewsItemWithApolloRenderer';

src/pages/jobs.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { graphql, gql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
 import Main from '../layouts/Main';

src/pages/newest.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  graphql,
-  gql,
-} from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import Main from '../layouts/Main';
 import NewsFeed from '../components/presentational/NewsFeed';

src/pages/reply.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  graphql,
-  gql,
-} from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import Main from '../layouts/Main';
 import Comment from '../components/presentational/Comment';

src/pages/show.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
-import { graphql, gql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
 import Main from '../layouts/Main';

src/pages/shownew.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
-import { graphql, gql } from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 
 import Main from '../layouts/Main';

src/pages/upvoted.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-  graphql,
-  gql,
-} from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 
 import Main from '../layouts/Main';
 import NewsFeed from '../components/presentational/NewsFeed';

src/pages/user.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
-import {
-  graphql,
-  gql,
-} from 'react-apollo';
+import { graphql } from 'react-apollo';
+import gql from 'graphql-tag';
 import PropTypes from 'prop-types';
 import renderHTML from 'react-render-html';