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
Adam Soffer 01cc898450 Update Apollo example (#1021)
* 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
2017-02-07 12:02:28 +01:00

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>
)
}
}
)