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
|
import React from 'react';
import PropTypes from 'prop-types';
import { ApolloProvider, getDataFromTree } from 'react-apollo';
import Head from 'next/head';
import initApollo from './initApollo';
// Gets the display name of a JSX component for dev tools
function getComponentDisplayName(Component) {
return Component.displayName || Component.name || 'Unknown';
}
let myApollo;
export default ComposedComponent =>
class WithData extends React.Component {
static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`;
static propTypes = {
serverState: PropTypes.object.isRequired,
};
static async getInitialProps(ctx) {
// Initial serverState with apollo (empty)
let serverState;
// Evaluate the composed component's getInitialProps()
let composedInitialProps = {};
if (ComposedComponent.getInitialProps) {
composedInitialProps = await ComposedComponent.getInitialProps(ctx);
}
// Run all GraphQL queries in the component tree
// and extract the resulting data
const apollo = initApollo();
myApollo = apollo;
try {
console.log('Rendering SSR');
const url = {
query: ctx.query,
asPath: ctx.asPath,
pathname: ctx.pathname,
};
// Run all GraphQL queries
await getDataFromTree(<ComposedComponent ctx={ctx} url={url} {...composedInitialProps} />, {
router: {
asPath: ctx.asPath,
pathname: ctx.pathname,
query: ctx.query,
},
client: apollo,
});
} catch (error) {
console.log('An error Happened with Server Side Rendering');
console.log(error);
// Prevent Apollo Client GraphQL errors from crashing SSR.
// Handle them in components via the data.error prop:
// http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
}
if (!process.browser) {
// getDataFromTree does not call componentWillUnmount
// head side effect therefore need to be cleared manually
Head.rewind();
}
// Extract query data from the Apollo store
serverState = {
apollo: {
data: apollo.cache.extract(),
},
};
return {
serverState,
...composedInitialProps,
};
}
// constructor(props) {
// super(props);
// this.apollo = initApollo(this.props.serverState.apollo.data);
// }
render() {
console.log('Second RENDER');
console.log(myApollo);
return (
<ApolloProvider client={myApollo}>
<ComposedComponent {...this.props} />
</ApolloProvider>
);
}
};
|
