1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

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
This commit is contained in:
Brian Dombrowski 2017-11-23 08:05:51 -05:00 committed by Tim Neutkens
parent 742fa6590c
commit 5ede8c9dc3
8 changed files with 115 additions and 5 deletions

View file

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

View file

@ -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)

View file

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

View file

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

View file

@ -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>
))

View file

@ -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>
))

View file

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

View file

@ -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}`)
})
})