Update Apollo Example (vercel#888)

adamsoffer · rauchg · commit a76ec83b64a4 · 2017-01-25T17:10:21.000-08:00
* 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
diff --git a/examples/with-apollo/lib/withData.js b/examples/with-apollo/lib/withData.js
@@ -11,10 +11,15 @@ export default (Component) => (
       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 url={{ query: ctx.query, pathname: ctx.pathname }} />
+            <Component {...props} />
           </ApolloProvider>
         )
         await getDataFromTree(app)
@@ -28,7 +33,8 @@ export default (Component) => (
             data: state.apollo.data
           }
         },
-        headers
+        headers,
+        ...props
       }
     }
 
@@ -41,7 +47,7 @@ export default (Component) => (
     render () {
       return (
         <ApolloProvider client={this.client} store={this.store}>
-          <Component url={this.props.url} />
+          <Component {...this.props} />
         </ApolloProvider>
       )
     }

Original file line number	Diff line number	Diff line change
`@@ -11,10 +11,15 @@ export default (Component) => (`
`11`	`11`	`const client = initClient(headers)`
`12`	`12`	`const store = initStore(client, client.initialState)`
`13`	`13`
	`14`	`+ const props = {`
	`15`	`+ url: { query: ctx.query, pathname: ctx.pathname },`
	`16`	`+ ...await (Component.getInitialProps ? Component.getInitialProps(ctx) : {})`
	`17`	`+ }`
	`18`	`+`
`14`	`19`	`if (!process.browser) {`
`15`	`20`	`const app = (`
`16`	`21`	`<ApolloProvider client={client} store={store}>`
`17`		`- <Component url={{ query: ctx.query, pathname: ctx.pathname }} />`
	`22`	`+ <Component {...props} />`
`18`	`23`	`</ApolloProvider>`
`19`	`24`	`)`
`20`	`25`	`await getDataFromTree(app)`
`@@ -28,7 +33,8 @@ export default (Component) => (`
`28`	`33`	`data: state.apollo.data`
`29`	`34`	`}`
`30`	`35`	`},`
`31`		`- headers`
	`36`	`+ headers,`
	`37`	`+ ...props`
`32`	`38`	`}`
`33`	`39`	`}`
`34`	`40`
`@@ -41,7 +47,7 @@ export default (Component) => (`
`41`	`47`	`render () {`
`42`	`48`	`return (`
`43`	`49`	`<ApolloProvider client={this.client} store={this.store}>`
`44`		`- <Component url={this.props.url} />`
	`50`	`+ <Component {...this.props} />`
`45`	`51`	`</ApolloProvider>`
`46`	`52`	`)`
`47`	`53`	`}`