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 { createUploadLink } from 'apollo-upload-client'
import { stylesGlobal, stylesGlobalTheme } from 'device-agnostic-ui'
import App from 'next/app'
import Head from 'next/head'
const createApolloClient = (cache = {}) =>
@ -14,57 +13,59 @@ const createApolloClient = (cache = {}) =>
link: createUploadLink({ uri: process.env.API_URI })
})
export default class CustomApp extends App {
static async getInitialProps({ ctx, router, Component }) {
const props = {}
const App = ({
Component,
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)
props.pageProps = await Component.getInitialProps(ctx)
App.getInitialProps = async context => {
const props = {
pageProps: context.Component.getInitialProps
? await context.Component.getInitialProps(context)
: {}
}
if (ctx.req) {
const apolloClient = createApolloClient()
try {
const { getDataFromTree } = await import('@apollo/react-ssr')
await getDataFromTree(
<CustomApp
{...props}
apolloClient={apolloClient}
router={router}
Component={Component}
/>
)
} catch (error) {
// Prevent crash from GraphQL errors.
console.error(error)
}
Head.rewind()
props.apolloCache = apolloClient.cache.extract()
if (context.ctx.req) {
const apolloClient = createApolloClient()
try {
const { getDataFromTree } = await import('@apollo/react-ssr')
await getDataFromTree(
<App
{...props}
apolloClient={apolloClient}
router={context.router}
Component={context.Component}
/>
)
} catch (error) {
// Prevent crash from GraphQL errors.
console.error(error)
}
return props
Head.rewind()
props.apolloCache = apolloClient.cache.extract()
}
apolloClient =
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>
)
}
return props
}
export default App