mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
4b257483e2
* 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
50 lines
1.3 KiB
JavaScript
50 lines
1.3 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)
|
|
|
|
if (!process.browser) {
|
|
const app = (
|
|
<ApolloProvider client={client} store={store}>
|
|
<Component url={{ query: ctx.query, pathname: ctx.pathname }} />
|
|
</ApolloProvider>
|
|
)
|
|
await getDataFromTree(app)
|
|
}
|
|
|
|
const state = store.getState()
|
|
return {
|
|
initialState: {
|
|
...state,
|
|
apollo: {
|
|
data: state.apollo.data
|
|
}
|
|
},
|
|
headers
|
|
}
|
|
}
|
|
|
|
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 url={this.props.url} />
|
|
</ApolloProvider>
|
|
)
|
|
}
|
|
}
|
|
)
|