2017-03-12 08:33:01 +01:00
|
|
|
import React from 'react'
|
2017-05-11 00:23:11 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2017-03-12 08:33:01 +01:00
|
|
|
import { ApolloProvider, getDataFromTree } from 'react-apollo'
|
2017-06-28 19:07:21 +02:00
|
|
|
import Head from 'next/head'
|
2017-05-11 00:23:11 +02:00
|
|
|
import initApollo from './initApollo'
|
|
|
|
|
2017-07-01 23:51:20 +02:00
|
|
|
// Gets the display name of a JSX component for dev tools
|
2017-12-05 19:50:45 +01:00
|
|
|
function getComponentDisplayName(Component) {
|
2017-07-01 23:51:20 +02:00
|
|
|
return Component.displayName || Component.name || 'Unknown'
|
|
|
|
}
|
|
|
|
|
2017-05-11 00:23:11 +02:00
|
|
|
export default ComposedComponent => {
|
|
|
|
return class WithData extends React.Component {
|
2017-12-05 19:50:45 +01:00
|
|
|
static displayName = `WithData(${getComponentDisplayName(
|
|
|
|
ComposedComponent
|
|
|
|
)})`
|
2017-05-11 00:23:11 +02:00
|
|
|
static propTypes = {
|
|
|
|
serverState: PropTypes.object.isRequired
|
|
|
|
}
|
2017-01-22 13:27:06 +01:00
|
|
|
|
2017-12-05 19:50:45 +01:00
|
|
|
static async getInitialProps(ctx) {
|
2017-11-04 11:24:16 +01:00
|
|
|
// Initial serverState with apollo (empty)
|
2017-12-05 19:50:45 +01:00
|
|
|
let serverState = {
|
2017-11-23 13:46:33 +01:00
|
|
|
apollo: {
|
2017-12-05 19:50:45 +01:00
|
|
|
data: {}
|
|
|
|
}
|
2017-11-23 13:46:33 +01:00
|
|
|
}
|
2017-01-22 13:27:06 +01:00
|
|
|
|
2017-05-11 00:23:11 +02:00
|
|
|
// Evaluate the composed component's getInitialProps()
|
|
|
|
let composedInitialProps = {}
|
|
|
|
if (ComposedComponent.getInitialProps) {
|
|
|
|
composedInitialProps = await ComposedComponent.getInitialProps(ctx)
|
2017-01-26 02:10:21 +01:00
|
|
|
}
|
|
|
|
|
2017-07-01 23:56:12 +02:00
|
|
|
// Run all GraphQL queries in the component tree
|
2017-05-11 00:23:11 +02:00
|
|
|
// and extract the resulting data
|
2017-01-22 13:27:06 +01:00
|
|
|
if (!process.browser) {
|
2017-05-11 00:23:11 +02:00
|
|
|
const apollo = initApollo()
|
2017-07-01 23:56:12 +02:00
|
|
|
// Provide the `url` prop data in case a GraphQL query uses it
|
2017-12-05 19:50:45 +01:00
|
|
|
const url = { query: ctx.query, pathname: ctx.pathname }
|
2017-07-01 23:56:12 +02:00
|
|
|
try {
|
|
|
|
// Run all GraphQL queries
|
|
|
|
await getDataFromTree(
|
|
|
|
<ApolloProvider client={apollo}>
|
|
|
|
<ComposedComponent url={url} {...composedInitialProps} />
|
|
|
|
</ApolloProvider>
|
|
|
|
)
|
|
|
|
} catch (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
|
|
|
|
}
|
2017-06-28 19:07:21 +02:00
|
|
|
// getDataFromTree does not call componentWillUnmount
|
|
|
|
// head side effect therefore need to be cleared manually
|
|
|
|
Head.rewind()
|
2017-05-11 00:23:11 +02:00
|
|
|
|
2017-07-01 23:56:12 +02:00
|
|
|
// Extract query data from the Apollo store
|
2017-05-11 00:23:11 +02:00
|
|
|
serverState = {
|
2017-07-01 23:56:12 +02:00
|
|
|
apollo: {
|
2017-10-28 09:19:56 +02:00
|
|
|
data: apollo.cache.extract()
|
2017-05-11 00:23:11 +02:00
|
|
|
}
|
|
|
|
}
|
2017-01-22 13:27:06 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2017-05-11 00:23:11 +02:00
|
|
|
serverState,
|
|
|
|
...composedInitialProps
|
2017-01-22 13:27:06 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-12-05 19:50:45 +01:00
|
|
|
constructor(props) {
|
2017-01-22 13:27:06 +01:00
|
|
|
super(props)
|
2017-10-28 09:19:56 +02:00
|
|
|
this.apollo = initApollo(this.props.serverState.apollo.data)
|
2017-01-22 13:27:06 +01:00
|
|
|
}
|
|
|
|
|
2017-12-05 19:50:45 +01:00
|
|
|
render() {
|
2017-01-22 13:27:06 +01:00
|
|
|
return (
|
2017-05-11 00:23:11 +02:00
|
|
|
<ApolloProvider client={this.apollo}>
|
|
|
|
<ComposedComponent {...this.props} />
|
2017-01-22 13:27:06 +01:00
|
|
|
</ApolloProvider>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
2017-05-11 00:23:11 +02:00
|
|
|
}
|