Experimental dependency updates.

- React v16
- Apollo Client v2 beta
- Next.js v4 beta

app/components/multiple-uploader.js

@@ -1,4 +1,5 @@
-import { graphql, gql } from 'react-apollo'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
 import FileInput from './file-input'
 import uploadsQuery from '../queries/uploads'
 

app/components/single-uploader.js

@@ -1,4 +1,5 @@
-import { graphql, gql } from 'react-apollo'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
 import FileInput from './file-input'
 import uploadsQuery from '../queries/uploads'
 

app/helpers/with-data.js

@@ -1,6 +1,8 @@
 import { Component } from 'react'
-import { ApolloClient, getDataFromTree, ApolloProvider } from 'react-apollo'
+import { ApolloClient } from 'apollo-client'
 import BatchHttpLink from 'apollo-link-batch-http'
+import InMemoryCache from 'apollo-cache-inmemory'
+import { getDataFromTree, ApolloProvider } from 'react-apollo'
 import { createApolloFetchUpload } from 'apollo-fetch-upload'
 import getDisplayName from 'react-display-name'
 import Head from 'next/head'
@@ -15,17 +17,16 @@ let apolloClient
  * @param {Object} [initialState] - Redux initial state.
  * @returns {Object} Apollo Client instance.
  */
-const createApolloClient = initialState =>
+const createApolloClient = (initialState = {}) => {
-  new ApolloClient({
+  const link = new BatchHttpLink({
-    initialState,
+    fetch: createApolloFetchUpload({ uri: process.env.API_URI })
-    ssrMode,
-    networkInterface: new BatchHttpLink({
-      fetch: createApolloFetchUpload({
-        uri: process.env.API_URI
-      })
-    })
   })
 
+  const cache = new InMemoryCache().restore(initialState)
+
+  return new ApolloClient({ link, cache, ssrMode })
+}
+
 export default ComposedComponent =>
   class WithData extends Component {
     static displayName = `WithData(${getDisplayName(ComposedComponent)})`
@@ -91,7 +92,9 @@ export default ComposedComponent =>
 
         // Set Apollo Client initial state so the client can adopt data fetched
         // on the server.
-        initialProps.initialState = { apollo: apolloClient.getInitialState() }
+        initialProps.initialState = apolloClient.queryManager.dataStore
+          .getCache()
+          .extract()
       }
 
       // Return the final page component inital props

app/package.json

@@ -6,15 +6,18 @@
     "npm": ">=5.4"
   },
   "dependencies": {
+    "apollo-cache-inmemory": "^0.2.0-beta.3",
+    "apollo-client": "^2.0.0-beta.3",
     "apollo-fetch-upload": "^1.1.0",
     "apollo-link-batch-http": "^0.1.0",
     "babel-plugin-transform-inline-environment-variables": "^0.2.0",
     "dotenv-cli": "^1.4.0",
-    "next": "^3.0.6",
+    "graphql-tag": "^2.4.2",
-    "react": "^15.6.2",
+    "next": "^4.0.0-beta.2",
-    "react-apollo": "^1.4.16",
+    "react": "^16.0.0",
+    "react-apollo": "^2.0.0-beta.0",
     "react-display-name": "^0.2.3",
-    "react-dom": "^15.6.2"
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
     "babel-eslint": "^7.2.3",

app/queries/uploads.js

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