1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-apollo/lib/withData.js
Roland Warmerdam f4d6cbfc19 Many improvements to the Apollo examples (#1905)
* Many improvements to the Apollo examples

* Use static properties
2017-05-11 00:23:11 +02:00

67 lines
1.8 KiB
JavaScript

import React from 'react'
import PropTypes from 'prop-types'
import { ApolloProvider, getDataFromTree } from 'react-apollo'
import initApollo from './initApollo'
export default ComposedComponent => {
return class WithData extends React.Component {
static displayName = `WithData(${ComposedComponent.displayName})`
static propTypes = {
serverState: PropTypes.object.isRequired
}
static async getInitialProps (ctx) {
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
if (!process.browser) {
const apollo = initApollo()
// Provide the `url` prop data in case a graphql query uses it
const url = {query: ctx.query, pathname: ctx.pathname}
// Run all graphql queries
const app = (
<ApolloProvider client={apollo}>
<ComposedComponent url={url} {...composedInitialProps} />
</ApolloProvider>
)
await getDataFromTree(app)
// Extract query data from the Apollo's store
const state = apollo.getInitialState()
serverState = {
apollo: { // Make sure to only include Apollo's data state
data: state.data
}
}
}
return {
serverState,
...composedInitialProps
}
}
constructor (props) {
super(props)
this.apollo = initApollo(this.props.serverState)
}
render () {
return (
<ApolloProvider client={this.apollo}>
<ComposedComponent {...this.props} />
</ApolloProvider>
)
}
}
}