From 3b45dd7b593825721ec9ee9f6a49c732601b1ae0 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 21 Sep 2017 15:39:12 -0400 Subject: Cha Ching --- lib/withData.js | 65 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 32 insertions(+), 33 deletions(-) (limited to 'lib') 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( - ) + ); } 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 ( - ) + ); } - } -} + }; -- cgit v1.3