Update with-apollo example (vercel#1394)

adamsoffer · timneutkens · commit d5bd8c7d039c · 2017-03-14T23:41:55.000+01: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

* Remove unnecessary sorting of array

* Update Apollo example

* Remove trailing comma

* Update reduxRootKey

* Remove unnecessary babelrc

* Update with-apollo example

- Remove use of deprecated 'reduxRootKey' option
- Add loading indicator inside pagination button
diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js
@@ -4,65 +4,64 @@ import PostUpvoter from './PostUpvoter'
 const POSTS_PER_PAGE = 10
 
 function PostList ({ data: { allPosts, loading, _allPostsMeta }, loadMorePosts }) {
-  if (loading) {
-    return <div>Loading</div>
+  if (allPosts && allPosts.length) {
+    const areMorePosts = allPosts.length < _allPostsMeta.count
+    return (
+      <section>
+        <ul>
+          {allPosts.map((post, index) =>
+            <li key={post.id}>
+              <div>
+                <span>{index + 1}. </span>
+                <a href={post.url}>{post.title}</a>
+                <PostUpvoter id={post.id} votes={post.votes} />
+              </div>
+            </li>
+          )}
+        </ul>
+        {areMorePosts ? <button onClick={() => loadMorePosts()}> {loading ? 'Loading...' : 'Show More'} </button> : ''}
+        <style jsx>{`
+          section {
+            padding-bottom: 20px;
+          }
+          li {
+            display: block;
+            margin-bottom: 10px;
+          }
+          div {
+            align-items: center;
+            display: flex;
+          }
+          a {
+            font-size: 14px;
+            margin-right: 10px;
+            text-decoration: none;
+            padding-bottom: 0;
+            border: 0;
+          }
+          span {
+            font-size: 14px;
+            margin-right: 5px;
+          }
+          ul {
+            margin: 0;
+            padding: 0;
+          }
+          button:before {
+            align-self: center;
+            border-style: solid;
+            border-width: 6px 4px 0 4px;
+            border-color: #ffffff transparent transparent transparent;
+            content: "";
+            height: 0;
+            margin-right: 5px;
+            width: 0;
+          }
+        `}</style>
+      </section>
+    )
   }
-
-  const areMorePosts = allPosts.length < _allPostsMeta.count
-
-  return (
-    <section>
-      <ul>
-        {allPosts.map((post, index) =>
-          <li key={post.id}>
-            <div>
-              <span>{index + 1}. </span>
-              <a href={post.url}>{post.title}</a>
-              <PostUpvoter id={post.id} votes={post.votes} />
-            </div>
-          </li>
-        )}
-      </ul>
-      {areMorePosts ? <button onClick={() => loadMorePosts()}><span />Show More</button> : ''}
-      <style jsx>{`
-        section {
-          padding-bottom: 20px;
-        }
-        li {
-          display: block;
-          margin-bottom: 10px;
-        }
-        div {
-          align-items: center;
-          display: flex;
-        }
-        a {
-          font-size: 14px;
-          margin-right: 10px;
-          text-decoration: none;
-          padding-bottom: 0;
-          border: 0;
-        }
-        span {
-          font-size: 14px;
-          margin-right: 5px;
-        }
-        ul {
-          margin: 0;
-          padding: 0;
-        }
-        button:before {
-          align-self: center;
-          border-style: solid;
-          border-width: 6px 4px 0 4px;
-          border-color: #ffffff transparent transparent transparent;
-          content: "";
-          height: 0;
-          width: 0;
-        }
-      `}</style>
-    </section>
-  )
+  return <div>Loading</div>
 }
 
 const allPosts = gql`
diff --git a/examples/with-apollo/lib/withData.js b/examples/with-apollo/lib/withData.js
@@ -26,10 +26,11 @@ export default (Component) => (
       }
 
       const state = store.getState()
+
       return {
         initialState: {
           ...state,
-          [client.reduxRootKey]: {
+          apollo: {
             data: client.getInitialState().data
           }
         },

Original file line number	Diff line number	Diff line change
`@@ -26,10 +26,11 @@ export default (Component) => (`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`const state = store.getState()`
	`29`	`+`
`29`	`30`	`return {`
`30`	`31`	`initialState: {`
`31`	`32`	`...state,`
`32`		`- [client.reduxRootKey]: {`
	`33`	`+ apollo: {`
`33`	`34`	`data: client.getInitialState().data`
`34`	`35`	`}`
`35`	`36`	`},`