Updated Apollo to version 2.0.0

clintonwoo · clintonwoo · commit 0b2e8df39504 · 2017-10-27T21:22:27.000-04:00
diff --git a/package.json b/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",
diff --git a/src/components/container/NewsFeedWithApolloRenderer.js b/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 />;
diff --git a/src/components/presentational/Comment.js b/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';
 
diff --git a/src/components/presentational/Comments.js b/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';
 
diff --git a/src/components/presentational/NewsDetail.js b/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';
diff --git a/src/components/presentational/NewsFeed.js b/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';
diff --git a/src/components/presentational/NewsTitle.js b/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';
diff --git a/src/data/mutations/hideNewsItem.js b/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!) {
diff --git a/src/data/mutations/submitNewsItem.js b/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`
diff --git a/src/data/mutations/upvoteNewsItem.js b/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!) {
diff --git a/src/data/queries/meQuery.js b/src/data/queries/meQuery.js
@@ -1,6 +1,4 @@
-import {
-  gql,
-} from 'react-apollo';
+import gql from 'graphql-tag';
 
 export default gql`
   query User {
diff --git a/src/helpers/initApollo.js b/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,
   });
 }
 
diff --git a/src/helpers/withData.js b/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>
-      )
+      );
     }
-  }
-}
+  };
+};
diff --git a/src/layouts/Blank.js b/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;
diff --git a/src/layouts/Main.js b/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,
diff --git a/src/layouts/Notice.js b/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;
diff --git a/src/pages/ask.js b/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';
diff --git a/src/pages/best.js b/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';
diff --git a/src/pages/favorites.js b/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';
diff --git a/src/pages/forgot.js b/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';
diff --git a/src/pages/index.js b/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';
diff --git a/src/pages/item.js b/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';
diff --git a/src/pages/jobs.js b/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';
diff --git a/src/pages/newest.js b/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';
diff --git a/src/pages/reply.js b/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';
diff --git a/src/pages/show.js b/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';
diff --git a/src/pages/shownew.js b/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';
diff --git a/src/pages/upvoted.js b/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';
diff --git a/src/pages/user.js b/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';
 
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { gql } from 'react-apollo';`
	`1`	`+import gql from 'graphql-tag';`
`2`	`2`
`3`	`3`	export default gql`
`4`	`4`	`mutation HideNewsItem($id: Int!) {`