Apollo example: avoid double render in browser (#4734)

Apollo's getDataFromTree is supposed to be called during the server side rendering.
Being called in browser it fires an unnecessary fake render process and blocks components from rendering with loading=true.

Also there was a mistake in this code:

    // `getDataFromTree` renders the component first, the client is passed off as a property.
    // After that rendering is done using Next's normal rendering pipeline
    this.apolloClient = props.apolloClient || initApollo(props.apolloState.data)

**Apollo** component is not rendered by getDataFromTree actually, it renders the **App** directly, thus props.apolloClient will always be undefined.

This example was discussed here: https://github.com/zeit/next.js/issues/387.

examples/with-apollo/lib/with-apollo-client.js

@@ -18,6 +18,7 @@ export default (App) => {
       // Run all GraphQL queries in the component tree
       // and extract the resulting data
       const apollo = initApollo()
+      if (!process.browser) {
         try {
           // Run all GraphQL queries
           await getDataFromTree(
@@ -36,14 +37,15 @@ export default (App) => {
           console.error('Error while running `getDataFromTree`', error)
         }
 
-      if (!process.browser) {
         // getDataFromTree does not call componentWillUnmount
         // head side effect therefore need to be cleared manually
         Head.rewind()
-      }
 
         // Extract query data from the Apollo store
         apolloState.data = apollo.cache.extract()
+      } else {
+        apolloState.data = {}
+      }
 
       return {
         ...appProps,
@@ -53,9 +55,7 @@ export default (App) => {
 
     constructor (props) {
       super(props)
-      // `getDataFromTree` renders the component first, the client is passed off as a property.
+      this.apolloClient = initApollo(props.apolloState.data)
-      // After that rendering is done using Next's normal rendering pipeline
-      this.apolloClient = props.apolloClient || initApollo(props.apolloState.data)
     }
 
     render () {