46b57a6eff
* [refactor] with-apollo-and-redux: 2.0.0 - This ports over `with-apollo` (w/ recent `withRouter` fix and addition for Post) along with implementing `apollo-cache-redux` #3463 - The `redux` side of things is lacking (it is the *same* as the original example) - Created a `routes.js` for use on Server and Client Side (to expand the PostList functionality) - SSR is maintained - Redid the "PostVote" a bit... sorry. 😬️ Possible todo(s): - Add in API and Clock Examples from `with-redux` to show Apollo and Redux working together a bit more - redux-saga (I personally use this, may be too opinionated for the base example though) Packages updated: - apollo-cache-redux - apollo-client-preset - graphql - graphql-anywhere - graphql-tag - isomorphic-unfetch - next-routes - prop-types - react - react-apollo - react-dom - redux * [refactor] fix linting issues When I run `yarn lint` explicitly these were caught, but not doing a build proper. Apologies on that! * [chore] 📦️ package.json: like other examples * [refactor] +apollo-cache-inmemory, -apollo-cache-redux Separation of Apollo and Redux. 😄️ We could stand to use a few actual examples of Redux, though this is a good starting block. Some other code cleanup as well.
63 lines
1.5 KiB
JavaScript
63 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import { withRouter } from 'next/router'
|
|
import { graphql } from 'react-apollo'
|
|
import gql from 'graphql-tag'
|
|
|
|
import ErrorMessage from './ErrorMessage'
|
|
import PostVoteUp from './PostVoteUp'
|
|
import PostVoteDown from './PostVoteDown'
|
|
import PostVoteCount from './PostVoteCount'
|
|
|
|
function Post ({ id, data: { error, Post } }) {
|
|
if (error) return <ErrorMessage message='Error loading blog post.' />
|
|
if (Post) {
|
|
return (
|
|
<section>
|
|
<div key={Post.id}>
|
|
<h1>{Post.title}</h1>
|
|
<p>ID: {Post.id}<br />URL: {Post.url}</p>
|
|
<span>
|
|
<PostVoteUp id={Post.id} votes={Post.votes} />
|
|
<PostVoteCount votes={Post.votes} />
|
|
<PostVoteDown id={Post.id} votes={Post.votes} />
|
|
</span>
|
|
</div>
|
|
<style jsx>{`
|
|
span {
|
|
display: flex;
|
|
font-size: 14px;
|
|
margin-right: 5px;
|
|
}
|
|
`}</style>
|
|
</section>
|
|
)
|
|
}
|
|
return <div>Loading</div>
|
|
}
|
|
|
|
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 (Post)
|
|
const ComponentWithMutation = graphql(post, {
|
|
options: ({ router: { query } }) => ({
|
|
variables: {
|
|
id: query.id
|
|
}
|
|
}),
|
|
props: ({ data }) => ({
|
|
data
|
|
})
|
|
})(Post)
|
|
|
|
export default withRouter(ComponentWithMutation)
|