with-apollo-auth updated for Apollo 2.0 (#3278)

* Updated for Apollo 2.0

* Updated for commit: ccb188a

* Simplified serverState

Updated with danistefanovic's comment. Looks better.

* Revert "Simplified serverState"

This reverts commit 1b543a35909dcfe401c753cb2f71760180087057.

* Simplified server

Updated with Statedanistefanovic's comment.

examples/with-apollo-auth/lib/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 { setContext } from 'apollo-link-context'
 import fetch from 'isomorphic-unfetch'
 
 let apolloClient = null
@@ -9,25 +12,26 @@ if (!process.browser) {
 }
 
 function create (initialState, { getToken }) {
-  const networkInterface = createNetworkInterface({
-    uri: 'https://api.graph.cool/simple/v1/cj3h80ffbllm20162alevpcby'
+  const httpLink = createHttpLink({
+    uri: 'https://api.graph.cool/simple/v1/cj5geu3slxl7t0127y8sity9r',
+    credentials: 'same-origin'
   })
 
-  networkInterface.use([{
-    applyMiddleware (req, next) {
-      if (!req.options.headers) {
-        req.options.headers = {}  // Create the header object if needed.
+  const authLink = setContext((_, { headers }) => {
+    const token = getToken()
+    return {
+      headers: {
+        ...headers,
+        authorization: token ? `Bearer ${token}` : null
       }
-      const token = getToken()
-      req.options.headers.authorization = token ? `Bearer ${token}` : null
-      next()
     }
-  }])
+  })
 
   return new ApolloClient({
-    initialState,
+    connectToDevTools: process.browser,
     ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
-    networkInterface
+    link: authLink.concat(httpLink),
+    cache: new InMemoryCache().restore(initialState || {})
   })
 }
 
@@ -44,4 +48,4 @@ export default function initApollo (initialState, options) {
   }
 
   return apolloClient
-}
+}

examples/with-apollo-auth/lib/withData.js

@@ -2,13 +2,14 @@ import React from 'react'
 import cookie from 'cookie'
 import PropTypes from 'prop-types'
 import { ApolloProvider, getDataFromTree } from 'react-apollo'
+import Head from 'next/head'
 
 import initApollo from './initApollo'
 
-function parseCookies (ctx = {}, options = {}) {
+function parseCookies(context = {}, options = {}) {
   return cookie.parse(
-    ctx.req && ctx.req.headers.cookie
-      ? ctx.req.headers.cookie
+    context.req && context.req.headers.cookie
+      ? context.req.headers.cookie
       : document.cookie,
     options
   )
@@ -21,7 +22,7 @@ export default ComposedComponent => {
       serverState: PropTypes.object.isRequired
     }
 
-    static async getInitialProps (context) {
+    static async getInitialProps(context) {
       let serverState = {}
 
       // Setup a server-side one-time-use apollo client for initial props and
@@ -46,30 +47,32 @@ export default ComposedComponent => {
         }
 
         // Provide the `url` prop data in case a graphql query uses it
-        const url = {query: context.query, pathname: context.pathname}
-
-        // Run all graphql queries
-        const app = (
-          <ApolloProvider client={apollo}>
-            <ComposedComponent url={url} {...composedInitialProps} />
-          </ApolloProvider>
-        )
-        await getDataFromTree(app, {
-          router: {
-            query: context.query,
-            pathname: context.pathname,
-            asPath: context.asPath
-          }
-        })
+        const url = { query: context.query, pathname: context.pathname }
+        try {
+          // Run all GraphQL queries
+          const app = (
+            <ApolloProvider client={apollo}>
+              <ComposedComponent url={url} {...composedInitialProps} />
+            </ApolloProvider>
+          )
+          await getDataFromTree(app, {
+            router: {
+              query: context.query,
+              pathname: context.pathname,
+              asPath: context.asPath
+            }
+          })
+        } catch (error) {
+          // Prevent Apollo Client GraphQL errors from crashing SSR.
+          // Handle them in components via the data.error prop:
+          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
+        }
+        // getDataFromTree does not call componentWillUnmount
+        // head side effect therefore need to be cleared manually
+        Head.rewind()
 
         // 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
-          }
-        }
+        serverState = apollo.cache.extract()
       }
 
       return {
@@ -78,7 +81,7 @@ export default ComposedComponent => {
       }
     }
 
-    constructor (props) {
+    constructor(props) {
       super(props)
       // Note: Apollo should never be used on the server side beyond the initial
       // render within `getInitialProps()` above (since the entire prop tree
@@ -89,7 +92,7 @@ export default ComposedComponent => {
       })
     }
 
-    render () {
+    render() {
       return (
         <ApolloProvider client={this.apollo}>
           <ComposedComponent {...this.props} />
@@ -97,4 +100,4 @@ export default ComposedComponent => {
       )
     }
   }
-}
+}

examples/with-apollo-auth/package.json

@@ -10,13 +10,15 @@
     "test": "NODE_ENV=test ava"
   },
   "dependencies": {
+    "apollo-client-preset": "1.0.2",
+    "apollo-link-context": "1.0.0",
     "cookie": "^0.3.1",
-    "graphql": "^0.9.3",
+    "graphql": "0.11.7",
     "isomorphic-unfetch": "^2.0.0",
     "next": "latest",
     "prop-types": "^15.5.10",
     "react": "^16.0.0",
-    "react-apollo": "^1.1.3",
+    "react-apollo": "2.0.0",
     "react-dom": "^16.0.0"
   },
   "devDependencies": {