[with-apollo] Fix missing rootContext (#3468)

examples/with-apollo/components/Header.js

@@ -1,6 +1,7 @@
 import Link from 'next/link'
+import { withRouter } from 'next/router'
 
-export default ({ pathname }) => (
+const Header = ({ router: { pathname } }) => (
   <header>
     <Link prefetch href='/'>
       <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
@@ -23,3 +24,5 @@ export default ({ pathname }) => (
     `}</style>
   </header>
 )
+
+export default withRouter(Header)

examples/with-apollo/lib/withData.js

@@ -36,14 +36,20 @@ export default ComposedComponent => {
       // and extract the resulting data
       if (!process.browser) {
         const apollo = initApollo()
-        // Provide the `url` prop data in case a GraphQL query uses it
-        const url = { query: ctx.query, pathname: ctx.pathname }
+
         try {
           // Run all GraphQL queries
           await getDataFromTree(
             <ApolloProvider client={apollo}>
-              <ComposedComponent url={url} {...composedInitialProps} />
-            </ApolloProvider>
+              <ComposedComponent {...composedInitialProps} />
+            </ApolloProvider>,
+            {
+              router: {
+                asPath: ctx.asPath,
+                pathname: ctx.pathname,
+                query: ctx.query
+              }
+            }
           )
         } catch (error) {
           // Prevent Apollo Client GraphQL errors from crashing SSR.

examples/with-apollo/pages/about.js

@@ -1,9 +1,9 @@
 import App from '../components/App'
 import Header from '../components/Header'
 
-export default props => (
+export default () => (
   <App>
-    <Header pathname={props.url.pathname} />
+    <Header />
     <article>
       <h1>The Idea Behind This Example</h1>
       <p>

examples/with-apollo/pages/index.js

@@ -4,9 +4,9 @@ import Submit from '../components/Submit'
 import PostList from '../components/PostList'
 import withData from '../lib/withData'
 
-export default withData(props => (
+export default withData(() => (
   <App>
-    <Header pathname={props.url.pathname} />
+    <Header />
     <Submit />
     <PostList />
   </App>