diff --git a/examples/with-apollo/lib/apollo.js b/examples/with-apollo/lib/apollo.js
index 92007ffc300e..e056914a36db 100644
--- a/examples/with-apollo/lib/apollo.js
+++ b/examples/with-apollo/lib/apollo.js
@@ -1,4 +1,5 @@
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'
@@ -17,6 +18,9 @@ let apolloClient = 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 (
@@ -26,15 +30,19 @@ 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 =
PageComponent.displayName || PageComponent.name || 'Component'
- if (displayName === 'App') {
- console.warn('This withApollo HOC only works with PageComponents.')
- }
-
WithApollo.displayName = `withApollo(${displayName})`
}
@@ -65,14 +73,14 @@ export function withApollo (PageComponent, { ssr = true } = {}) {
try {
// Run all GraphQL queries
const { getDataFromTree } = await import('@apollo/react-ssr')
- await getDataFromTree(
-
- )
+
+ // Since AppComponents and PageComponents have different context types
+ // we need to modify their props a little.
+ const props = isAppHoc
+ ? { ...pageProps, apolloClient }
+ : { pageProps: { ...pageProps, apolloClient } }
+
+ await getDataFromTree()
} catch (error) {
// Prevent Apollo Client GraphQL errors from crashing SSR.
// Handle them in components via the data.error prop: