/
Main.tsx
103 lines (88 loc) · 2.97 KB
/
Main.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
import React from 'react';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { Store } from 'redux';
import { Provider } from 'react-redux';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
import ReactGA from 'react-ga';
import { apiUrl, createApolloClient, createReduxStore, getStoreReducer, log } from '@gqlapp/core-common';
import ClientModule from '@gqlapp/module-client-react';
import settings from '@gqlapp/config';
import RedBox from './RedBox';
if (!__TEST__) {
log.info(`Connecting to GraphQL backend at: ${apiUrl}`);
}
const ref: { modules: ClientModule; client: ApolloClient<any>; store: Store } = {
modules: null,
client: null,
store: null
};
const history = createBrowserHistory();
export const onAppCreate = async (modules: ClientModule, entryModule: NodeModule) => {
ref.modules = modules;
ref.client = createApolloClient({
apiUrl,
createNetLink: ref.modules.createNetLink,
createLink: ref.modules.createLink,
connectionParams: ref.modules.connectionParams,
clientResolvers: ref.modules.resolvers
});
if (entryModule.hot && entryModule.hot.data && entryModule.hot.data.store) {
ref.store = entryModule.hot.data.store;
ref.store.replaceReducer(getStoreReducer(history, ref.modules.reducers));
} else {
ref.store = createReduxStore(ref.modules.reducers, {}, history, routerMiddleware(history));
}
};
const logPageView = (location: any) => {
ReactGA.set({ page: location.pathname });
ReactGA.pageview(location.pathname);
};
if (!__TEST__) {
// Initialize Google Analytics and send events on each location change
ReactGA.initialize(settings.analytics.ga.trackingId);
logPageView(window.location);
}
history.listen(location => logPageView(location));
export const onAppDispose = (_: any, data: any) => {
data.store = ref.store;
delete window.__APOLLO_STATE__;
};
class ServerError extends Error {
constructor(error: any) {
super();
for (const key of Object.getOwnPropertyNames(error)) {
this[key] = error[key];
}
this.name = 'ServerError';
}
}
interface MainState {
error?: ServerError;
info?: any;
ready?: boolean;
}
export class Main extends React.Component<any, MainState> {
constructor(props: any) {
super(props);
const serverError = window.__SERVER_ERROR__;
serverError ? (this.state = { error: new ServerError(serverError), ready: true }) : (this.state = {});
}
public componentDidCatch(error: ServerError, info: any) {
this.setState({ error, info });
}
public render() {
return this.state.error ? (
<RedBox error={this.state.error} />
) : (
ref.modules.getWrappedRoot(
<Provider store={ref.store}>
<ApolloProvider client={ref.client}>
{ref.modules.getDataRoot(<ConnectedRouter history={history}>{ref.modules.router}</ConnectedRouter>)}
</ApolloProvider>
</Provider>
)
);
}
}