mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
01cc898450
* Add minimal apollo example * Update apollo example README * Update apollo example demo link in README * Fix button styles * Fix show more button * Alias demo url * Include the data field on the Apollo store when hydrating * Revert * Include the data field on the Apollo store when hydrating per tpreusse's suggestion. * Add example to faq section in README * Sort by newest; Add active state to buttons * Make optimization suggestions * Use process.browser; inline props * Pass wrapped component's initial props into component heirarchy if they exist * Remove unnecessary sorting of array * Update Apollo example * Remove trailing comma * Update reduxRootKey * Remove unnecessary babelrc
56 lines
1.4 KiB
JavaScript
56 lines
1.4 KiB
JavaScript
import { ApolloProvider, getDataFromTree } from 'react-apollo'
|
|
import React from 'react'
|
|
import 'isomorphic-fetch'
|
|
import { initClient } from './initClient'
|
|
import { initStore } from './initStore'
|
|
|
|
export default (Component) => (
|
|
class extends React.Component {
|
|
static async getInitialProps (ctx) {
|
|
const headers = ctx.req ? ctx.req.headers : {}
|
|
const client = initClient(headers)
|
|
const store = initStore(client, client.initialState)
|
|
|
|
const props = {
|
|
url: { query: ctx.query, pathname: ctx.pathname },
|
|
...await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})
|
|
}
|
|
|
|
if (!process.browser) {
|
|
const app = (
|
|
<ApolloProvider client={client} store={store}>
|
|
<Component {...props} />
|
|
</ApolloProvider>
|
|
)
|
|
await getDataFromTree(app)
|
|
}
|
|
|
|
const state = store.getState()
|
|
return {
|
|
initialState: {
|
|
...state,
|
|
[client.reduxRootKey]: {
|
|
data: client.getInitialState().data
|
|
}
|
|
},
|
|
headers,
|
|
...props
|
|
}
|
|
}
|
|
|
|
constructor (props) {
|
|
super(props)
|
|
this.client = initClient(this.props.headers)
|
|
this.store = initStore(this.client, this.props.initialState)
|
|
}
|
|
|
|
render () {
|
|
return (
|
|
<ApolloProvider client={this.client} store={this.store}>
|
|
<Component {...this.props} />
|
|
</ApolloProvider>
|
|
)
|
|
}
|
|
}
|
|
)
|