Update examples for Apollo with AppTree (#8180)

* Update examples for Apollo with AppTree

* Fix apolloClient being overwritten when rendering AppTree

Author: ijjk

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

@@ -19,8 +19,7 @@ export default App => {
 
     static async getInitialProps (ctx) {
       const {
-        Component,
-        router,
+        AppTree,
         ctx: { req, res }
       } = ctx
       const apollo = initApollo(
@@ -48,14 +47,7 @@ export default App => {
         // and extract the resulting data
         try {
           // Run all GraphQL queries
-          await getDataFromTree(
-            <App
-              {...appProps}
-              Component={Component}
-              router={router}
-              apolloClient={apollo}
-            />
-          )
+          await getDataFromTree(<AppTree {...appProps} apolloClient={apollo} />)
         } catch (error) {
           // Prevent Apollo Client GraphQL errors from crashing SSR.
           // Handle them in components via the data.error prop:
@@ -89,7 +81,7 @@ export default App => {
     }
 
     render () {
-      return <App {...this.props} apolloClient={this.apolloClient} />
+      return <App apolloClient={this.apolloClient} {...this.props} />
     }
   }
 }

examples/with-apollo/lib/with-apollo-client.js

@@ -7,7 +7,7 @@ export default App => {
   return class Apollo extends React.Component {
     static displayName = 'withApollo(App)'
     static async getInitialProps (ctx) {
-      const { Component, router } = ctx
+      const { AppTree } = ctx
 
       let appProps = {}
       if (App.getInitialProps) {
@@ -20,14 +20,7 @@ export default App => {
       if (typeof window === 'undefined') {
         try {
           // Run all GraphQL queries
-          await getDataFromTree(
-            <App
-              {...appProps}
-              Component={Component}
-              router={router}
-              apolloClient={apollo}
-            />
-          )
+          await getDataFromTree(<AppTree {...appProps} apolloClient={apollo} />)
         } catch (error) {
           // Prevent Apollo Client GraphQL errors from crashing SSR.
           // Handle them in components via the data.error prop:
@@ -55,7 +48,7 @@ export default App => {
     }
 
     render () {
-      return <App {...this.props} apolloClient={this.apolloClient} />
+      return <App apolloClient={this.apolloClient} {...this.props} />
     }
   }
 }