jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Functional custom App.

Browse Source
This commit is contained in:
Jayden Seric 2019-12-02 14:59:18 +11:00
parent 1fdbfeb1b0
commit 55cee10b6e
1 changed files with 49 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
app/pages/_app.js
View File

@ -4,7 +4,6 @@ import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-client' import { ApolloClient } from 'apollo-client'
import { createUploadLink } from 'apollo-upload-client' import { createUploadLink } from 'apollo-upload-client'
import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui' import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui'
import App from 'next/app'
import Head from 'next/head' import Head from 'next/head'
const createApolloClient = (cache = {}) => const createApolloClient = (cache = {}) =>
@ -14,57 +13,59 @@ const createApolloClient = (cache = {}) =>
link: createUploadLink({ uri: process.env.API_URI }) link: createUploadLink({ uri: process.env.API_URI })
}) })
export default class CustomApp extends App { const App = ({
static async getInitialProps({ ctx, router, Component }) { Component,
const props = {} pageProps,
apolloCache,
apolloClient = createApolloClient(apolloCache)
}) => (
<ApolloProvider client={apolloClient}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="white" />
<link rel="manifest" href="/manifest.webmanifest" />
</Head>
<Component {...pageProps} />
<style jsx global>
{stylesGlobalTheme}
</style>
<style jsx global>
{stylesGlobal}
</style>
</ApolloProvider>
)
if (Component.getInitialProps) App.getInitialProps = async context => {
props.pageProps = await Component.getInitialProps(ctx) const props = {
pageProps: context.Component.getInitialProps
? await context.Component.getInitialProps(context)
: {}
}
if (ctx.req) { if (context.ctx.req) {
const apolloClient = createApolloClient() const apolloClient = createApolloClient()
try { try {
const { getDataFromTree } = await import('@apollo/react-ssr') const { getDataFromTree } = await import('@apollo/react-ssr')
await getDataFromTree( await getDataFromTree(
<CustomApp <App
{...props} {...props}
apolloClient={apolloClient} apolloClient={apolloClient}
router={router} router={context.router}
Component={Component} Component={context.Component}
/> />
) )
} catch (error) { } catch (error) {
// Prevent crash from GraphQL errors. // Prevent crash from GraphQL errors.
console.error(error) console.error(error)
}
Head.rewind()
props.apolloCache = apolloClient.cache.extract()
} }
return props Head.rewind()
props.apolloCache = apolloClient.cache.extract()
} }
apolloClient = return props
this.props.apolloClient || createApolloClient(this.props.apolloCache)
render() {
const { Component, pageProps = {} } = this.props
return (
<ApolloProvider client={this.apolloClient}>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<meta name="theme-color" content="white" />
<link rel="manifest" href="/manifest.webmanifest" />
</Head>
<Component {...pageProps} />
<style jsx global>
{stylesGlobalTheme}
</style>
<style jsx global>
{stylesGlobal}
</style>
</ApolloProvider>
)
}
} }
export default App