diff options
| author | Wes Bos <wesbos@gmail.com> | 2017-09-21 15:39:12 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2017-09-21 15:39:12 -0400 |
| commit | 3b45dd7b593825721ec9ee9f6a49c732601b1ae0 (patch) | |
| tree | a2e8e73d6b6b6bc32eda2bb79af817397e4304f5 /lib | |
| parent | 1450e579c67e3d969cb099dfe6c1cefd1e313fb5 (diff) | |
Cha Ching
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/withData.js | 65 |
1 files changed, 32 insertions, 33 deletions
diff --git a/lib/withData.js b/lib/withData.js index de67fd3..6b37792 100644 --- a/lib/withData.js +++ b/lib/withData.js @@ -1,44 +1,44 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { ApolloProvider, getDataFromTree } from 'react-apollo' -import Head from 'next/head' -import initApollo from './initApollo' +import React from 'react'; +import PropTypes from 'prop-types'; +import { ApolloProvider, getDataFromTree } from 'react-apollo'; +import Head from 'next/head'; +import initApollo from './initApollo'; // Gets the display name of a JSX component for dev tools -function getComponentDisplayName (Component) { - return Component.displayName || Component.name || 'Unknown' +function getComponentDisplayName(Component) { + return Component.displayName || Component.name || 'Unknown'; } -export default ComposedComponent => { - return class WithData extends React.Component { - static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})` +export default ComposedComponent => + class WithData extends React.Component { + static displayName = `WithData(${getComponentDisplayName(ComposedComponent)})`; static propTypes = { - serverState: PropTypes.object.isRequired - } + serverState: PropTypes.object.isRequired, + }; - static async getInitialProps (ctx) { - let serverState = {} + static async getInitialProps(ctx) { + let serverState = {}; // Evaluate the composed component's getInitialProps() - let composedInitialProps = {} + let composedInitialProps = {}; if (ComposedComponent.getInitialProps) { - composedInitialProps = await ComposedComponent.getInitialProps(ctx) + composedInitialProps = await ComposedComponent.getInitialProps(ctx); } // Run all GraphQL queries in the component tree // and extract the resulting data if (!process.browser) { - const apollo = initApollo() + const apollo = initApollo(); // Provide the `url` prop data in case a GraphQL query uses it - const url = {query: ctx.query, pathname: ctx.pathname} + const url = { query: ctx.query, pathname: ctx.pathname }; 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: @@ -46,36 +46,35 @@ export default ComposedComponent => { } // getDataFromTree does not call componentWillUnmount // head side effect therefore need to be cleared manually - Head.rewind() + Head.rewind(); // Extract query data from the Apollo store - const state = apollo.getInitialState() + const state = apollo.getInitialState(); serverState = { apollo: { // Only include the Apollo data state - data: state.data - } - } + data: state.data, + }, + }; } return { serverState, - ...composedInitialProps - } + ...composedInitialProps, + }; } - constructor (props) { - super(props) - this.apollo = initApollo(this.props.serverState) + constructor(props) { + super(props); + this.apollo = initApollo(this.props.serverState); } - render () { + render() { return ( <ApolloProvider client={this.apollo}> <ComposedComponent {...this.props} /> </ApolloProvider> - ) + ); } - } -} + }; |
