Improve example

- remove broken console warning
- migrate hocs to hooks

examples/with-apollo/components/Header.js

@@ -1,33 +1,36 @@
 import Link from 'next/link'
-import { withRouter } from 'next/router'
+import { useRouter } from 'next/router'
 
-const Header = ({ router: { pathname } }) => (
-  <header>
-    <Link href="/">
-      <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
-    </Link>
-    <Link href="/client-only">
-      <a className={pathname === '/client-only' ? 'is-active' : ''}>
-        Client-Only
-      </a>
-    </Link>
-    <Link href="/about">
-      <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
-    </Link>
-    <style jsx>{`
-      header {
-        margin-bottom: 25px;
-      }
-      a {
-        font-size: 14px;
-        margin-right: 15px;
-        text-decoration: none;
-      }
-      .is-active {
-        text-decoration: underline;
-      }
-    `}</style>
-  </header>
-)
+const Header = () => {
+  const { pathname } = useRouter()
+  return (
+    <header>
+      <Link href="/">
+        <a className={pathname === '/' ? 'is-active' : ''}>Home</a>
+      </Link>
+      <Link href="/client-only">
+        <a className={pathname === '/client-only' ? 'is-active' : ''}>
+          Client-Only
+        </a>
+      </Link>
+      <Link href="/about">
+        <a className={pathname === '/about' ? 'is-active' : ''}>About</a>
+      </Link>
+      <style jsx>{`
+        header {
+          margin-bottom: 25px;
+        }
+        a {
+          font-size: 14px;
+          margin-right: 15px;
+          text-decoration: none;
+        }
+        .is-active {
+          text-decoration: underline;
+        }
+      `}</style>
+    </header>
+  )
+}
 
-export default withRouter(Header)
+export default Header

examples/with-apollo/lib/apollo.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import App from 'next/app'
 import Head from 'next/head'
 import { ApolloProvider } from '@apollo/react-hooks'
 import { ApolloClient } from 'apollo-client'
@@ -18,9 +17,6 @@ let globalApolloClient = null
  * @param {Boolean} [config.ssr=true]
  */
 export function withApollo(PageComponent, { ssr = true } = {}) {
-  const isAppHoc =
-    PageComponent === App || PageComponent.prototype instanceof App
-
   const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => {
     const client = apolloClient || initApolloClient(apolloState)
     return (
@@ -30,14 +26,6 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
     )
   }
 
-  if (process.env.NODE_ENV !== 'production') {
-    if (isAppHoc && ssr) {
-      console.warn(
-        'You are using the "withApollo" HOC on "_app.js" level. Please note that this disables project wide automatic static optimization. Better wrap your PageComponents directly.'
-      )
-    }
-  }
-
   // Set the correct displayName in development
   if (process.env.NODE_ENV !== 'production') {
     const displayName =
@@ -76,10 +64,16 @@ export function withApollo(PageComponent, { ssr = true } = {}) {
 
             // Since AppComponents and PageComponents have different context types
             // we need to modify their props a little.
-            const props = isAppHoc
-              ? { ...pageProps, apolloClient }
-              : { pageProps: { ...pageProps, apolloClient } }
-
+            const inAppContext = Boolean(ctx.ctx)
+            let props
+            if (inAppContext) {
+              props = { ...pageProps, apolloClient }
+            } else {
+              props = { pageProps: { ...pageProps, apolloClient } }
+            }
+
+            // Takes React AppTree, determine which queries are needed to render,
+            // then fetche them all.
             await getDataFromTree(<AppTree {...props} />)
           } catch (error) {
             // Prevent Apollo Client GraphQL errors from crashing SSR.