with-apollo example using Apollo 2 (#3180)

* Updated dependencies related to Apollo and React.

* Updated libs with Apollo 2 new set of modules.

* Updated to Apollo 2 react integration modules.

* Updated withData to separate apollo state from the app's state.

examples/with-apollo/components/PostList.js

@@ -1,4 +1,5 @@
-import { gql, graphql } from 'react-apollo'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
 import ErrorMessage from './ErrorMessage'
 import PostUpvoter from './PostUpvoter'
 

examples/with-apollo/components/PostUpvoter.js

@@ -1,5 +1,6 @@
 import React from 'react'
-import { gql, graphql } from 'react-apollo'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
 
 function PostUpvoter ({ upvote, votes, id }) {
   return (

examples/with-apollo/components/Submit.js

@@ -1,4 +1,5 @@
-import { gql, graphql } from 'react-apollo'
+import { graphql } from 'react-apollo'
+import gql from 'graphql-tag'
 
 function Submit ({ createPost }) {
   function handleSubmit (e) {

examples/with-apollo/lib/initApollo.js

@@ -1,4 +1,6 @@
-import { ApolloClient, createNetworkInterface } from 'react-apollo'
+import { ApolloClient } from 'apollo-client'
+import { HttpLink } from 'apollo-link-http'
+import { InMemoryCache } from 'apollo-cache-inmemory'
 import fetch from 'isomorphic-fetch'
 
 let apolloClient = null
@@ -10,14 +12,15 @@ if (!process.browser) {
 
 function create (initialState) {
   return new ApolloClient({
-    initialState,
+    connectToDevTools: process.browser,
     ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
-    networkInterface: createNetworkInterface({
+    link: new HttpLink({
       uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn', // Server URL (must be absolute)
-      opts: { // Additional fetch() options like `credentials` or `headers`
+      opts: {
-        credentials: 'same-origin'
+        credentials: 'same-origin' // Additional fetch() options like `credentials` or `headers`
       }
-    })
+    }),
+    cache: new InMemoryCache().restore(initialState || {}),
   })
 }
 

examples/with-apollo/lib/withData.js

@@ -48,12 +48,9 @@ export default ComposedComponent => {
         Head.rewind()
 
         // Extract query data from the Apollo store
-        const state = apollo.getInitialState()
-
         serverState = {
           apollo: {
-            // Only include the Apollo data state
+            data: apollo.cache.extract()
-            data: state.data
           }
         }
       }
@@ -66,7 +63,7 @@ export default ComposedComponent => {
 
     constructor (props) {
       super(props)
-      this.apollo = initApollo(this.props.serverState)
+      this.apollo = initApollo(this.props.serverState.apollo.data)
     }
 
     render () {

examples/with-apollo/package.json

@@ -7,13 +7,16 @@
     "start": "next start"
   },
   "dependencies": {
-    "graphql": "^0.9.3",
+    "apollo-client-preset": "^1.0.1",
+    "graphql": "^0.11.7",
+    "graphql-anywhere": "^3.1.0",
+    "graphql-tag": "^2.5.0",
     "isomorphic-fetch": "^2.2.1",
     "next": "latest",
     "prop-types": "^15.5.8",
-    "react": "^15.5.4",
+    "react": "^16.0.0",
-    "react-dom": "^15.5.4",
+    "react-apollo": "^2.0.0",
-    "react-apollo": "^1.1.3"
+    "react-dom": "^16.0.0"
   },
   "author": "",
   "license": "ISC"