-
Notifications
You must be signed in to change notification settings - Fork 79
/
withApollo.tsx
114 lines (96 loc) · 3.25 KB
/
withApollo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import ApolloClient from 'apollo-client';
import { AppProps, default as NextApp, DefaultAppIProps } from 'next/app';
import Head from 'next/head';
import PropTypes from 'prop-types';
import React from 'react';
import { getDataFromTree } from 'react-apollo';
import initApollo from './apollo';
import {
ApolloContext,
InitApolloClient,
WithApolloOptions,
WithApolloProps,
WithApolloState
} from './types';
const ssrMode = !process.browser;
// Gets the display name of a JSX component for dev tools
function getDisplayName(Component: React.ComponentType<any>) {
return Component.displayName || Component.name || 'Unknown';
}
export default function withApollo<TCache = any>(
client: InitApolloClient<TCache>,
options: WithApolloOptions = {}
) {
type ApolloProps = WithApolloProps<TCache>;
if (!options.getDataFromTree) {
options.getDataFromTree = 'always';
}
return (App: typeof NextApp) => {
return class WithApollo extends React.Component<
ApolloProps & AppProps & DefaultAppIProps
> {
public static displayName = `WithApollo(${getDisplayName(App)})`;
public static propTypes = {
apolloState: PropTypes.object,
apollo: PropTypes.object
};
public static getInitialProps = async (appCtx: ApolloContext) => {
const { Component, router, ctx } = appCtx;
const headers = ctx.req ? ctx.req.headers : {};
const apollo = initApollo<TCache>(client, { ctx, headers });
const apolloState: WithApolloState<TCache> = {};
const getInitialProps = App.getInitialProps;
let appProps = { pageProps: {} };
if (getInitialProps) {
ctx.apolloClient = apollo;
appProps = await getInitialProps(appCtx);
}
if (ctx.res && (ctx.res.headersSent || ctx.res.finished)) {
return {};
}
if (
options.getDataFromTree === 'always' ||
(options.getDataFromTree === 'ssr' && ssrMode)
) {
try {
await getDataFromTree(
<App
{...appProps}
Component={Component}
router={router}
apolloState={apolloState}
apollo={apollo}
/>
);
} catch (error) {
// Prevent Apollo Client GraphQL errors from crashing SSR.
if (process.env.NODE_ENV !== 'production') {
// tslint:disable-next-line no-console This is a necessary debugging log
console.error('GraphQL error occurred [getDataFromTree]', error);
}
}
if (ssrMode) {
// getDataFromTree does not call componentWillUnmount
// head side effect therefore need to be cleared manually
Head.rewind();
}
apolloState.data = apollo.cache.extract();
}
return {
...appProps,
apolloState
};
};
public apollo: ApolloClient<TCache>;
constructor(props: ApolloProps & AppProps & DefaultAppIProps) {
super(props);
this.apollo = initApollo<TCache>(client, {
initialState: props.apolloState.data
});
}
public render() {
return <App {...this.props} apollo={this.apollo} />;
}
};
};
}