Update with-apollo example (#1394)

* 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
vercel · Mar 14, 2017 · d5bd8c7 · d5bd8c7
1 parent 68a7b59
commit d5bd8c7
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 59 deletions.
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
           }
         },