More complete with-apollo-and-redux example with dynamic post route (#3223)

* More complete with-apollo-and-redux example with dynamic post route

* Removed commented out code

examples/with-apollo-and-redux/components/Header.js

@@ -10,6 +10,10 @@ export default ({ pathname }) => (
       <a className={pathname === '/about' && 'is-active'}>About</a>
     </Link>
 
+    <Link prefetch href='/blog'>
+      <a className={pathname === '/blog' && 'is-active'}>Blog</a>
+    </Link>
+
     <style jsx>{`
       header {
         margin-bottom: 25px;

examples/with-apollo-and-redux/components/Post.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import { gql, graphql } from 'react-apollo'
+import PostUpvoter from './PostUpvoter'
+
+function Post ({ id, data: { loading, error, Post } }) {
+  return (
+    <section>
+      <div key={Post.id}>
+        <h1>{Post.title}</h1>
+        <p>ID: {Post.id}<br/>URL: {Post.url}</p>
+        <PostUpvoter id={Post.id} votes={Post.votes} />
+      </div>
+    </section>
+  )
+}
+
+const post = gql`
+    query post($id: ID!) {
+        Post(id: $id) {
+            id
+            title
+            votes
+            url
+            createdAt
+        }
+    }
+`
+
+
+// The `graphql` wrapper executes a GraphQL query and makes the results
+// available on the `data` prop of the wrapped component (PostList)
+// Tip: ownProps is parent component's props
+export default graphql(post, {
+  options: (ownProps) => {
+    return {
+      variables: {
+        id: ownProps.id
+      }
+    }
+  }
+})(Post)

examples/with-apollo-and-redux/components/PostList.js

@@ -1,6 +1,7 @@
 import { gql, graphql } from 'react-apollo'
 import ErrorMessage from './ErrorMessage'
 import PostUpvoter from './PostUpvoter'
+import Link from 'next/link'
 
 const POSTS_PER_PAGE = 10
 
@@ -15,7 +16,7 @@ function PostList ({ data: { loading, error, allPosts, _allPostsMeta }, loadMore
             <li key={post.id}>
               <div>
                 <span>{index + 1}. </span>
-                <a href={post.url}>{post.title}</a>
+                <Link href={{ pathname: '/blog/'+post.id}}><a>{post.title}</a></Link>
                 <PostUpvoter id={post.id} votes={post.votes} />
               </div>
             </li>

examples/with-apollo-and-redux/package.json

@@ -2,14 +2,15 @@
   "name": "with-apollo-and-redux",
   "version": "2.0.0",
   "scripts": {
-    "dev": "next",
+    "dev": "node server.js",
     "build": "next build",
-    "start": "next start"
+    "start": "NODE_ENV=production node server.js"
   },
   "dependencies": {
     "graphql": "^0.9.3",
     "isomorphic-unfetch": "^2.0.0",
     "next": "latest",
+    "next-routes": "^1.1.0",
     "prop-types": "^15.5.8",
     "react": "^16.0.0",
     "react-apollo": "^1.1.3",

examples/with-apollo-and-redux/pages/blog/entry.js

@@ -0,0 +1,11 @@
+import App from '../../components/App'
+import Header from '../../components/Header'
+import Post from '../../components/Post'
+import withData from '../../lib/withData'
+
+export default withData((props) => (
+  <App>
+    <Header pathname={props.url.pathname} />
+    <Post id={props.url.query.id} />
+  </App>
+))

examples/with-apollo-and-redux/pages/blog/index.js

@@ -0,0 +1,13 @@
+import App from '../../components/App'
+import Header from '../../components/Header'
+import Submit from '../../components/Submit'
+import PostList from '../../components/PostList'
+import withData from '../../lib/withData'
+
+export default withData((props) => (
+  <App>
+    <Header pathname={props.url.pathname} />
+    <Submit />
+    <PostList />
+  </App>
+))

examples/with-apollo-and-redux/pages/index.js

@@ -7,7 +7,6 @@ import withData from '../lib/withData'
 export default withData((props) => (
   <App>
     <Header pathname={props.url.pathname} />
-    <Submit />
-    <PostList />
+    <h1>Welcome Home.</h1>
   </App>
 ))

examples/with-apollo-and-redux/server.js

@@ -0,0 +1,40 @@
+/**
+ * server.js
+ *
+ * You can use the default server.js by simply running `next`,
+ * but a custom one is required to do paramaterized urls like
+ * blog/:slug.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * BENEVOLENT WEB LLC BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+const {createServer} = require('http')
+const next = require('next')
+
+const port = parseInt(process.env.PORT, 10) || 3000
+const dev = process.env.NODE_ENV !== 'production'
+const app = next({dev})
+
+/**
+ * Parameterized Routing with next-route
+ *
+ * Benefits: Less code, and easily handles complex url structures
+ */
+
+const routes = require('next-routes')()
+routes.add('blog/entry', '/blog/:id')
+
+const handler = routes.getRequestHandler(app)
+app.prepare().then(() => {
+  createServer(handler)
+    .listen(port, (err) => {
+      if (err) throw err
+      console.log(`> Ready on http://localhost:${port}`)
+    })
+})
+