Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Apollo example #780

Merged
merged 15 commits into from
Jan 22, 2017
Merged

Add Apollo example #780

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
3038bc0
Add minimal apollo example
Jan 15, 2017
fa622c7
Update apollo example README
Jan 15, 2017
0c7cb55
Update apollo example demo link in README
Jan 15, 2017
bd93b96
Fix button styles
Jan 15, 2017
31fba6b
Fix show more button
Jan 16, 2017
4666091
Alias demo url
Jan 17, 2017
f366e7a
Include the data field on the Apollo store when hydrating
Jan 17, 2017
106effc
Revert
Jan 17, 2017
2dc3cf0
Include the data field on the Apollo store when hydrating per tpreuss…
Jan 17, 2017
dea2641
Merge remote-tracking branch 'upstream/master'
Jan 19, 2017
292ca82
Merge remote-tracking branch 'upstream/master'
Jan 21, 2017
bca6518
Add example to faq section in README
Jan 21, 2017
8605d77
Sort by newest; Add active state to buttons
Jan 21, 2017
e2efe97
Make optimization suggestions
Jan 22, 2017
e6d777a
Use process.browser; inline props
Jan 22, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/with-apollo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Apollo Example
## Demo
https://with-apollo-oeaizzfwlu.now.sh
https://with-apollo-ehxkwxrnvf.now.sh
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try to use an alias :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah of course thanks for the tip!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would that just be now alias https://with-apollo-ehxkwxrnvf.now.sh [domain name] ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you got it correct :)
I hope you could use -a flag.


## How to use
Install it and run
Expand Down
4 changes: 3 additions & 1 deletion examples/with-apollo/components/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,12 @@ export default (props) => (
max-width: 650px;
}
button {
padding: 5px 7px;
align-items: center;
background-color: #22BAD9;
border: 0;
color: white;
display: flex;
padding: 5px 7px;
}
button:focus {
outline: none;
Expand Down
17 changes: 6 additions & 11 deletions examples/with-apollo/components/PostList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,7 @@ function PostList (props) {
return <div>Loading</div>
}

let button
if (allPosts.length < _allPostsMeta.count) {
button = <button onClick={() => loadMorePosts()}>Show More</button>
}
const areMorePosts = allPosts.length < _allPostsMeta.count

return (
<section>
Expand All @@ -30,8 +27,11 @@ function PostList (props) {
</li>
)}
</ul>
{button}
{areMorePosts ? <button onClick={() => loadMorePosts()}><span />Show More</button> : ''}
<style jsx>{`
section {
padding-bottom: 20px;
}
li {
display: block;
margin-bottom: 10px;
Expand All @@ -55,18 +55,13 @@ function PostList (props) {
margin: 0;
padding: 0;
}
button {
align-items: center;
display: flex;
}
button:before {
align-self: center;
border-color: #fff transparent transparent transparent;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: #ffffff transparent transparent transparent;
content: "";
height: 0;
margin-right: 5px;
width: 0;
}
`}</style>
Expand Down
6 changes: 2 additions & 4 deletions examples/with-apollo/components/PostUpvoter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ function PostUpvoter (props) {
{props.votes}
<style jsx>{`
button {
align-items: center;
background-color: transparent;
color: #000;
display: flex;
border: 1px solid #e4e4e4;
color: #000;
}
button:before {
align-self: center;
Expand Down Expand Up @@ -44,8 +42,8 @@ export default graphql(upvotePost, {
variables: { id, votes },
optimisticResponse: {
updatePost: {
id: ownProps.id,
// Note that we can access the props of the container at `ownProps`
id: ownProps.id,
votes: ownProps.votes + 1
}
}
Expand Down