diff --git a/examples/with-apollo/components/Header.js b/examples/with-apollo/components/Header.js
index 155efd8b8ee4a7..93ebea33ab2dc7 100644
--- a/examples/with-apollo/components/Header.js
+++ b/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 } }) => (
-
-)
+const Header = () => {
+ const { pathname } = useRouter()
+ return (
+
+ )
+}
-export default withRouter(Header)
+export default Header
diff --git a/examples/with-apollo/lib/apollo.js b/examples/with-apollo/lib/apollo.js
index 8afeb3970bb7a1..6ec7c2861c7d79 100644
--- a/examples/with-apollo/lib/apollo.js
+++ b/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()
} catch (error) {
// Prevent Apollo Client GraphQL errors from crashing SSR.