diff --git a/app/package-lock.json b/app/package-lock.json index 03dec5f..d69b6e0 100644 --- a/app/package-lock.json +++ b/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", diff --git a/app/package.json b/app/package.json index acc2468..3db0f7a 100644 --- a/app/package.json +++ b/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": { diff --git a/app/pages/_app.js b/app/pages/_app.js index 6d7429f..30d3f2f 100644 --- a/app/pages/_app.js +++ b/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( + + ) + } 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 ( - + ) } } - -export default withApollo(CustomApp) diff --git a/app/withApollo.js b/app/withApollo.js deleted file mode 100644 index 1f24c71..0000000 --- a/app/withApollo.js +++ /dev/null @@ -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( - - ) - } 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 - } - }