Simplified _app.js.

app/package-lock.json

@@ -5766,11 +5766,6 @@
         "prop-types": "^15.6.0"
       }
     },
-    "react-display-name": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.4.tgz",
-      "integrity": "sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA=="
-    },
     "react-dom": {
       "version": "16.5.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",

app/package.json

@@ -25,7 +25,6 @@
     "next": "^7.0.1-canary.0",
     "react": "^16.5.2",
     "react-apollo": "^2.1.11",
-    "react-display-name": "^0.2.4",
     "react-dom": "^16.5.2"
   },
   "devDependencies": {

app/pages/_app.js

@@ -1,18 +1,59 @@
-import { ApolloProvider } from 'react-apollo'
+import 'cross-fetch/polyfill'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { ApolloClient } from 'apollo-client'
+import { createUploadLink } from 'apollo-upload-client'
+import { getDataFromTree, ApolloProvider } from 'react-apollo'
 import App, { Container } from 'next/app'
-import withApollo from '../withApollo'
+import Head from 'next/head'
+
+const createApolloClient = (cache = {}) =>
+  new ApolloClient({
+    ssrMode: typeof window !== 'undefined',
+    cache: new InMemoryCache().restore(cache),
+    link: createUploadLink({ uri: process.env.API_URI })
+  })
+
+export default class CustomApp extends App {
+  static async getInitialProps({ ctx, router, Component }) {
+    const props = {}
+
+    if (Component.getInitialProps)
+      props.pageProps = await Component.getInitialProps(ctx)
+
+    if (ctx.req) {
+      const apolloClient = createApolloClient()
+      try {
+        await getDataFromTree(
+          <CustomApp
+            {...props}
+            apolloClient={apolloClient}
+            router={router}
+            Component={Component}
+          />
+        )
+      } catch (error) {
+        // Prevent crash from GraphQL errors.
+        // eslint-disable-next-line no-console
+        console.error(error)
+      }
+      Head.rewind()
+      props.apolloCache = apolloClient.cache.extract()
+    }
+
+    return props
+  }
+
+  apolloClient =
+    this.props.apolloClient || createApolloClient(this.props.apolloCache)
 
-class CustomApp extends App {
   render() {
-    const { Component, pageProps, apolloClient } = this.props
+    const { Component, pageProps } = this.props
     return (
       <Container>
-        <ApolloProvider client={apolloClient}>
+        <ApolloProvider client={this.apolloClient}>
           <Component {...pageProps} />
         </ApolloProvider>
       </Container>
     )
   }
 }
-
-export default withApollo(CustomApp)

app/withApollo.js

@@ -1,77 +0,0 @@
-import 'cross-fetch/polyfill'
-import { InMemoryCache } from 'apollo-cache-inmemory'
-import { ApolloClient } from 'apollo-client'
-import { createUploadLink } from 'apollo-upload-client'
-import Head from 'next/head'
-import { Component } from 'react'
-import { getDataFromTree } from 'react-apollo'
-import getDisplayName from 'react-display-name'
-
-let apolloClient
-
-const createApolloClient = (cache = {}) =>
-  new ApolloClient({
-    ssrMode: typeof window !== 'undefined',
-    cache: new InMemoryCache().restore(cache),
-    link: createUploadLink({ uri: process.env.API_URI })
-  })
-
-export default App =>
-  class WithApollo extends Component {
-    static displayName = `WithApollo(${getDisplayName(App)})`
-
-    static async getInitialProps(context) {
-      const props = App.getInitialProps
-        ? await App.getInitialProps(context)
-        : {}
-
-      // If server environment, preload the page.
-      if (context.ctx.req) {
-        const apolloClient = createApolloClient()
-
-        try {
-          await getDataFromTree(
-            <App
-              {...props}
-              Component={context.Component}
-              router={context.router}
-              apolloClient={apolloClient}
-            />
-          )
-        } catch (error) {
-          // Prevent crash from GraphQL errors.
-          // eslint-disable-next-line no-console
-          console.error(error)
-        }
-
-        props.apolloCache = apolloClient.cache.extract()
-
-        Head.rewind()
-      }
-
-      return props
-    }
-
-    constructor(props) {
-      super(props)
-
-      // Set the ApolloClient instance used in render().
-      this.apolloClient =
-        typeof window !== 'undefined'
-          ? // Client: Shared instance, created at first render after SSR.
-            (apolloClient =
-              apolloClient || createApolloClient(props.apolloCache))
-          : // Server: Private instance for SSR.
-            createApolloClient(props.apolloCache)
-    }
-
-    render() {
-      const {
-        // eslint-disable-next-line no-unused-vars
-        apolloCache,
-        ...appProps
-      } = this.props
-
-      return <App {...appProps} apolloClient={this.apolloClient} />
-    }
-  }