From 17b1154d9bba1ce4d26a44d8542af67f5f8bae6f Mon Sep 17 00:00:00 2001 From: Henrik Wenz Date: Sun, 25 Aug 2019 04:19:26 +0200 Subject: [PATCH] Remove _app from with-apollo example (#8504) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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: 4321c469466160d13bcd52afa099385e84a112a0 --- examples/with-apollo/README.md | 2 +- .../{with-apollo-client.js => with-apollo.js} | 41 +++++++++++++------ examples/with-apollo/pages/_app.js | 17 -------- examples/with-apollo/pages/about.js | 6 +-- examples/with-apollo/pages/index.js | 5 ++- 5 files changed, 37 insertions(+), 34 deletions(-) rename examples/with-apollo/lib/{with-apollo-client.js => with-apollo.js} (52%) delete mode 100644 examples/with-apollo/pages/_app.js diff --git a/examples/with-apollo/README.md b/examples/with-apollo/README.md index cdbbc88360cd6..3d52ef31465f0 100644 --- a/examples/with-apollo/README.md +++ b/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. diff --git a/examples/with-apollo/lib/with-apollo-client.js b/examples/with-apollo/lib/with-apollo.js similarity index 52% rename from examples/with-apollo/lib/with-apollo-client.js rename to examples/with-apollo/lib/with-apollo.js index 6954ea5254535..da8e3b174bb9a 100644 --- a/examples/with-apollo/lib/with-apollo-client.js +++ b/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() + await getDataFromTree( + + ) } 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 + const { apolloClient, apolloState, ...pageProps } = this.props + return ( + + + + ) } } } + +export default withApollo diff --git a/examples/with-apollo/pages/_app.js b/examples/with-apollo/pages/_app.js deleted file mode 100644 index c406ca9f382e9..0000000000000 --- a/examples/with-apollo/pages/_app.js +++ /dev/null @@ -1,17 +0,0 @@ -import App from 'next/app' -import React from 'react' -import { ApolloProvider } from '@apollo/react-hooks' -import withApolloClient from '../lib/with-apollo-client' - -class MyApp extends App { - render () { - const { Component, pageProps, apolloClient } = this.props - return ( - - - - ) - } -} - -export default withApolloClient(MyApp) diff --git a/examples/with-apollo/pages/about.js b/examples/with-apollo/pages/about.js index 5addfa4e5c3e8..7f9cdfcbb48a9 100644 --- a/examples/with-apollo/pages/about.js +++ b/examples/with-apollo/pages/about.js @@ -16,14 +16,14 @@ export default () => (

In this simple example, we integrate Apollo seamlessly with{' '} - Next by wrapping our App component - inside a{' '} + Next by wrapping our Page + component inside a{' '} higher-order component (HOC) . 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.

On initial page load, while on the server and inside getInitialProps, we diff --git a/examples/with-apollo/pages/index.js b/examples/with-apollo/pages/index.js index 723a41428c7ee..383311420d83e 100644 --- a/examples/with-apollo/pages/index.js +++ b/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 => (

) + +export default withApollo(IndexPage)