Remove _app from with-apollo example (#8504)

* Remove _app from with-apollo example

This allows automatic static optimization for pages, that don’t need apollo.

* Rename with-apollo

Name should be same as hoc

* Adjust text to reflect latest changes

more info: 4321c46

examples/with-apollo/README.md

@@ -45,7 +45,7 @@ now
 
 [Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
 
-In this simple example, we integrate Apollo seamlessly with Next by wrapping our _pages/\_app.js_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
+In this simple example, we integrate Apollo seamlessly with Next by wrapping our `pages/index.js` inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
 
 On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
 

examples/with-apollo/lib/with-apollo-client.js → examples/with-apollo/lib/with-apollo.js

@@ -2,25 +2,35 @@ import React from 'react'
 import initApollo from './init-apollo'
 import Head from 'next/head'
 import { getDataFromTree } from '@apollo/react-ssr'
+import { getDisplayName } from 'next-server/dist/lib/utils'
+import { ApolloProvider } from '@apollo/react-hooks'
+
+const withApollo = PageComponent => {
+  return class extends React.Component {
+    static displayName = `withApollo(${getDisplayName(PageComponent)})`
 
-export default App => {
-  return class Apollo extends React.Component {
-    static displayName = 'withApollo(App)'
     static async getInitialProps (ctx) {
       const { AppTree } = ctx
 
-      let appProps = {}
-      if (App.getInitialProps) {
-        appProps = await App.getInitialProps(ctx)
+      let pageProps = {}
+      if (PageComponent.getInitialProps) {
+        pageProps = await PageComponent.getInitialProps(ctx)
       }
 
       // Run all GraphQL queries in the component tree
       // and extract the resulting data
-      const apollo = initApollo()
+      const apolloClient = initApollo()
       if (typeof window === 'undefined') {
         try {
           // Run all GraphQL queries
-          await getDataFromTree(<AppTree {...appProps} apolloClient={apollo} />)
+          await getDataFromTree(
+            <AppTree
+              pageProps={{
+                ...pageProps,
+                apolloClient
+              }}
+            />
+          )
         } catch (error) {
           // Prevent Apollo Client GraphQL errors from crashing SSR.
           // Handle them in components via the data.error prop:
@@ -34,21 +44,28 @@ export default App => {
       }
 
       // Extract query data from the Apollo store
-      const apolloState = apollo.cache.extract()
+      const apolloState = apolloClient.cache.extract()
 
       return {
-        ...appProps,
+        ...pageProps,
         apolloState
       }
     }
 
     constructor (props) {
       super(props)
-      this.apolloClient = initApollo(props.apolloState)
+      this.apolloClient = props.apolloClient || initApollo(props.apolloState)
     }
 
     render () {
-      return <App apolloClient={this.apolloClient} {...this.props} />
+      const { apolloClient, apolloState, ...pageProps } = this.props
+      return (
+        <ApolloProvider client={this.apolloClient}>
+          <PageComponent {...pageProps} />
+        </ApolloProvider>
+      )
     }
   }
 }
+
+export default withApollo

examples/with-apollo/pages/about.js

@@ -16,14 +16,14 @@ export default () => (
       </p>
       <p>
         In this simple example, we integrate Apollo seamlessly with{' '}
-        <a href='https://github.com/zeit/next.js'>Next</a> by wrapping our App component
-        inside a{' '}
+        <a href='https://github.com/zeit/next.js'>Next</a> by wrapping our Page
+        component inside a{' '}
         <a href='https://facebook.github.io/react/docs/higher-order-components.html'>
           higher-order component (HOC)
         </a>
         . Using the HOC pattern we're able to pass down a central store of query
         result data created by Apollo into our React component hierarchy defined
-        inside each page of our Next application.
+        inside a page of our Next application.
       </p>
       <p>
         On initial page load, while on the server and inside getInitialProps, we

examples/with-apollo/pages/index.js

@@ -2,11 +2,14 @@ import App from '../components/App'
 import Header from '../components/Header'
 import Submit from '../components/Submit'
 import PostList from '../components/PostList'
+import withApollo from '../lib/with-apollo'
 
-export default () => (
+const IndexPage = props => (
   <App>
     <Header />
     <Submit />
     <PostList />
   </App>
 )
+
+export default withApollo(IndexPage)