From 741f211331c0b9049665257e10f2cefdf29eefb1 Mon Sep 17 00:00:00 2001
From: Sebastian <sebas5384@gmail.com>
Date: Sat, 28 Oct 2017 05:19:56 -0200
Subject: [PATCH] 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    |  3 ++-
 examples/with-apollo/components/PostUpvoter.js |  3 ++-
 examples/with-apollo/components/Submit.js      |  3 ++-
 examples/with-apollo/lib/initApollo.js         | 15 +++++++++------
 examples/with-apollo/lib/withData.js           |  7 ++-----
 examples/with-apollo/package.json              | 11 +++++++----
 6 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js
index 59efbcfb..ecd59292 100644
--- a/examples/with-apollo/components/PostList.js
+++ b/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'
 
diff --git a/examples/with-apollo/components/PostUpvoter.js b/examples/with-apollo/components/PostUpvoter.js
index 9c77e28f..05814bf6 100644
--- a/examples/with-apollo/components/PostUpvoter.js
+++ b/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 (
diff --git a/examples/with-apollo/components/Submit.js b/examples/with-apollo/components/Submit.js
index 5a780c7e..792d3b5d 100644
--- a/examples/with-apollo/components/Submit.js
+++ b/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) {
diff --git a/examples/with-apollo/lib/initApollo.js b/examples/with-apollo/lib/initApollo.js
index dfd1976f..5b315f92 100644
--- a/examples/with-apollo/lib/initApollo.js
+++ b/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`
-        credentials: 'same-origin'
+      opts: {
+        credentials: 'same-origin' // Additional fetch() options like `credentials` or `headers`
       }
-    })
+    }),
+    cache: new InMemoryCache().restore(initialState || {}),
   })
 }
 
diff --git a/examples/with-apollo/lib/withData.js b/examples/with-apollo/lib/withData.js
index 47207902..10954497 100644
--- a/examples/with-apollo/lib/withData.js
+++ b/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: state.data
+            data: apollo.cache.extract()
           }
         }
       }
@@ -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 () {
diff --git a/examples/with-apollo/package.json b/examples/with-apollo/package.json
index 9d48d3a2..2e3bdbe1 100644
--- a/examples/with-apollo/package.json
+++ b/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-dom": "^15.5.4",
-    "react-apollo": "^1.1.3"
+    "react": "^16.0.0",
+    "react-apollo": "^2.0.0",
+    "react-dom": "^16.0.0"
   },
   "author": "",
   "license": "ISC"