with-apollo example using Apollo 2 (vercel#3180)

sebas5384 · timneutkens · commit 741f211331c0 · 2017-10-29T00:58:17.000+02:00
* 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.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"

Original file line number	Diff line number	Diff line change
`@@ -48,12 +48,9 @@ export default ComposedComponent => {`
`48`	`48`	`Head.rewind()`
`49`	`49`
`50`	`50`	`// Extract query data from the Apollo store`
`51`		`- const state = apollo.getInitialState()`
`52`		`-`
`53`	`51`	`serverState = {`
`54`	`52`	`apollo: {`
`55`		`- // Only include the Apollo data state`
`56`		`- data: state.data`
	`53`	`+ data: apollo.cache.extract()`
`57`	`54`	`}`
`58`	`55`	`}`
`59`	`56`	`}`
`@@ -66,7 +63,7 @@ export default ComposedComponent => {`
`66`	`63`
`67`	`64`	`constructor (props) {`
`68`	`65`	`super(props)`
`69`		`- this.apollo = initApollo(this.props.serverState)`
	`66`	`+ this.apollo = initApollo(this.props.serverState.apollo.data)`
`70`	`67`	`}`
`71`	`68`
`72`	`69`	`render () {`