From 0af73a6381a673b2f75c90b867fb098a053e327c Mon Sep 17 00:00:00 2001 From: Matthew Francis Brunetti Date: Thu, 20 Sep 2018 23:04:31 -0400 Subject: [PATCH 1/8] Unpin and upgrade dependencies --- examples/with-apollo/package.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/with-apollo/package.json b/examples/with-apollo/package.json index 0bdb262a25d1f..e983b779fa3b6 100644 --- a/examples/with-apollo/package.json +++ b/examples/with-apollo/package.json @@ -7,14 +7,14 @@ "start": "next start" }, "dependencies": { - "apollo-boost": "^0.1.3", - "graphql": "0.13.2", - "isomorphic-unfetch": "2.0.0", + "apollo-boost": "^0.1.16", + "graphql": "^14.0.2", + "isomorphic-unfetch": "^3.0.0", "next": "latest", - "prop-types": "15.6.1", - "react": "16.2.0", - "react-apollo": "2.1.0", - "react-dom": "16.2.0" + "prop-types": "^15.6.2", + "react": "^16.5.2", + "react-apollo": "^2.1.11", + "react-dom": "^16.5.2" }, "author": "", "license": "ISC" From 55a9fa8863a33a80120763d3fa13d301ef3f41c0 Mon Sep 17 00:00:00 2001 From: Matthew Francis Brunetti Date: Thu, 20 Sep 2018 23:54:48 -0400 Subject: [PATCH 2/8] Refactor PostList to use Query component --- examples/with-apollo/components/PostList.js | 187 ++++++++++---------- 1 file changed, 89 insertions(+), 98 deletions(-) diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js index 7c1be81df081c..584a6368ca099 100644 --- a/examples/with-apollo/components/PostList.js +++ b/examples/with-apollo/components/PostList.js @@ -1,80 +1,83 @@ -import { graphql } from 'react-apollo' +import { Query } from 'react-apollo' import gql from 'graphql-tag' import ErrorMessage from './ErrorMessage' import PostUpvoter from './PostUpvoter' const POSTS_PER_PAGE = 10 -function PostList ({ - data: { loading, error, allPosts, _allPostsMeta }, - loadMorePosts -}) { - if (error) return - if (allPosts && allPosts.length) { - const areMorePosts = allPosts.length < _allPostsMeta.count - return ( -
-
    - {allPosts.map((post, index) => ( -
  • -
    - {index + 1}. - {post.title} - -
    -
    • - ))} -
- {areMorePosts ? ( - - ) : ( - '' - )} - -
- ) - } - return
Loading
+export default function PostList () { + return ( + + {({ loading, error, data: { allPosts, _allPostsMeta }, fetchMore }) => { + if (error) return + if (allPosts && allPosts.length) { + const areMorePosts = allPosts.length < _allPostsMeta.count + return ( +
+
    + {allPosts.map((post, index) => ( +
  • +
    + {index + 1}. + {post.title} + +
    +
    • + ))} +
+ {areMorePosts ? ( + + ) : ( + '' + )} + +
+ ) + } + return
Loading
+ }} + + ) } export const allPosts = gql` @@ -96,31 +99,19 @@ export const allPostsQueryVars = { first: POSTS_PER_PAGE } -// The `graphql` wrapper executes a GraphQL query and makes the results -// available on the `data` prop of the wrapped component (PostList) -export default graphql(allPosts, { - options: { - variables: allPostsQueryVars - }, - props: ({ data }) => { - return ({ - data, - loadMorePosts: () => { - return data.fetchMore({ - variables: { - skip: data.allPosts.length - }, - updateQuery: (previousResult, { fetchMoreResult }) => { - if (!fetchMoreResult) { - return previousResult - } - return Object.assign({}, previousResult, { - // Append the new posts results to the old one - allPosts: [...previousResult.allPosts, ...fetchMoreResult.allPosts] - }) - } - }) +function loadMorePosts (allPosts, fetchMore) { + return fetchMore({ + variables: { + skip: allPosts.length + }, + updateQuery: (previousResult, { fetchMoreResult }) => { + if (!fetchMoreResult) { + return previousResult } - }) - } -})(PostList) + return Object.assign({}, previousResult, { + // Append the new posts results to the old one + allPosts: [...previousResult.allPosts, ...fetchMoreResult.allPosts] + }) + } + }) +} From 54ce5d508f24221096f428cd742ccac7caf460ed Mon Sep 17 00:00:00 2001 From: Matthew Francis Brunetti Date: Fri, 21 Sep 2018 01:06:13 -0400 Subject: [PATCH 3/8] Clean up PostList module --- examples/with-apollo/components/PostList.js | 185 ++++++++++---------- examples/with-apollo/components/Submit.js | 6 +- 2 files changed, 94 insertions(+), 97 deletions(-) diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js index 584a6368ca099..54736d81717cd 100644 --- a/examples/with-apollo/components/PostList.js +++ b/examples/with-apollo/components/PostList.js @@ -3,84 +3,7 @@ import gql from 'graphql-tag' import ErrorMessage from './ErrorMessage' import PostUpvoter from './PostUpvoter' -const POSTS_PER_PAGE = 10 - -export default function PostList () { - return ( - - {({ loading, error, data: { allPosts, _allPostsMeta }, fetchMore }) => { - if (error) return - if (allPosts && allPosts.length) { - const areMorePosts = allPosts.length < _allPostsMeta.count - return ( -
-
    - {allPosts.map((post, index) => ( -
  • -
    - {index + 1}. - {post.title} - -
    -
    • - ))} -
- {areMorePosts ? ( - - ) : ( - '' - )} - -
- ) - } - return
Loading
- }} - - ) -} - -export const allPosts = gql` +export const allPostsQuery = gql` query allPosts($first: Int!, $skip: Int!) { allPosts(orderBy: createdAt_DESC, first: $first, skip: $skip) { id @@ -96,22 +19,96 @@ export const allPosts = gql` ` export const allPostsQueryVars = { skip: 0, - first: POSTS_PER_PAGE + first: 10 } -function loadMorePosts (allPosts, fetchMore) { - return fetchMore({ - variables: { - skip: allPosts.length - }, - updateQuery: (previousResult, { fetchMoreResult }) => { - if (!fetchMoreResult) { - return previousResult - } - return Object.assign({}, previousResult, { - // Append the new posts results to the old one - allPosts: [...previousResult.allPosts, ...fetchMoreResult.allPosts] - }) - } - }) +export default function PostList () { + return ( + + {({ loading, error, data: { allPosts, _allPostsMeta }, fetchMore }) => { + if (error) return + if (loading) return
Loading
+ + function loadMorePosts () { + fetchMore({ + variables: { + skip: allPosts.length + }, + updateQuery: (previousResult, { fetchMoreResult }) => { + if (!fetchMoreResult) { + return previousResult + } + return Object.assign({}, previousResult, { + // Append the new posts results to the old one + allPosts: [...previousResult.allPosts, ...fetchMoreResult.allPosts] + }) + } + }) + } + + const areMorePosts = allPosts.length < _allPostsMeta.count + return ( +
+
    + {allPosts.map((post, index) => ( +
  • +
    + {index + 1}. + {post.title} + +
    +
    • + ))} +
+ {areMorePosts ? ( + + ) : ( + '' + )} + +
+ ) + }} + + ) } diff --git a/examples/with-apollo/components/Submit.js b/examples/with-apollo/components/Submit.js index dfe0225411bf8..482cfbdf8702f 100644 --- a/examples/with-apollo/components/Submit.js +++ b/examples/with-apollo/components/Submit.js @@ -1,6 +1,6 @@ import { graphql } from 'react-apollo' import gql from 'graphql-tag' -import { allPosts, allPostsQueryVars } from './PostList' +import { allPostsQuery, allPostsQueryVars } from './PostList' function Submit ({ createPost }) { function handleSubmit (event) { @@ -57,11 +57,11 @@ export default graphql(createPost, { variables: { title, url }, update: (proxy, { data: { createPost } }) => { const data = proxy.readQuery({ - query: allPosts, + query: allPostsQuery, variables: allPostsQueryVars }) proxy.writeQuery({ - query: allPosts, + query: allPostsQuery, data: { ...data, allPosts: [createPost, ...data.allPosts] From 0bea3f3c45246113db0c696ce235ce9460c31dc6 Mon Sep 17 00:00:00 2001 From: Matthew Francis Brunetti Date: Fri, 21 Sep 2018 02:04:25 -0400 Subject: [PATCH 4/8] Refactor PostUpvoter to use ApolloConsumer component --- .../with-apollo/components/PostUpvoter.js | 84 ++++++++++--------- 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/examples/with-apollo/components/PostUpvoter.js b/examples/with-apollo/components/PostUpvoter.js index 11bf1433c6820..324e03c626e63 100644 --- a/examples/with-apollo/components/PostUpvoter.js +++ b/examples/with-apollo/components/PostUpvoter.js @@ -1,32 +1,38 @@ import React from 'react' -import { graphql } from 'react-apollo' +import { ApolloConsumer } from 'react-apollo' import { gql } from 'apollo-boost' -function PostUpvoter ({ upvote, votes, id }) { +export default function PostUpvoter ({ votes, id }) { return ( - + + {client => { + return ( + + ) + }} + ) } @@ -40,19 +46,17 @@ const upvotePost = gql` } ` -export default graphql(upvotePost, { - props: ({ ownProps, mutate }) => ({ - upvote: (id, votes) => - mutate({ - variables: { id, votes }, - optimisticResponse: { - __typename: 'Mutation', - updatePost: { - __typename: 'Post', - id: ownProps.id, - votes: ownProps.votes + 1 - } - } - }) +function upvote (id, votes, client) { + client.mutate({ + mutation: upvotePost, + variables: {id, votes}, + optimisticResponse: { + __typename: 'Mutation', + updatePost: { + __typename: 'Post', + id, + votes, + } + } }) -})(PostUpvoter) +} From 31b3c29f81599bedcae1549a47ffadc090dae599 Mon Sep 17 00:00:00 2001 From: Matthew Francis Brunetti Date: Fri, 21 Sep 2018 02:13:00 -0400 Subject: [PATCH 5/8] Clean up PostUpvoter module --- .../with-apollo/components/PostUpvoter.js | 55 ++++++++++--------- 1 file changed, 28 insertions(+), 27 deletions(-) diff --git a/examples/with-apollo/components/PostUpvoter.js b/examples/with-apollo/components/PostUpvoter.js index 324e03c626e63..856bd1f7bc33e 100644 --- a/examples/with-apollo/components/PostUpvoter.js +++ b/examples/with-apollo/components/PostUpvoter.js @@ -1,13 +1,39 @@ import React from 'react' import { ApolloConsumer } from 'react-apollo' -import { gql } from 'apollo-boost' +import gql from 'graphql-tag' export default function PostUpvoter ({ votes, id }) { return ( {client => { + function upvotePost () { + client.mutate({ + mutation: gql` + mutation updatePost($id: ID!, $votes: Int) { + updatePost(id: $id, votes: $votes) { + id + __typename + votes + } + } + `, + variables: { + id, + votes: votes + 1 + }, + optimisticResponse: { + __typename: 'Mutation', + updatePost: { + __typename: 'Post', + id, + votes: votes + 1 + } + } + }) + } + return ( - + + + ) + }} + ) } -const createPost = gql` +const createPostMutation = gql` mutation createPost($title: String!, $url: String!) { createPost(title: $title, url: $url) { id @@ -50,25 +56,23 @@ const createPost = gql` } ` -export default graphql(createPost, { - props: ({ mutate }) => ({ - createPost: (title, url) => - mutate({ - variables: { title, url }, - update: (proxy, { data: { createPost } }) => { - const data = proxy.readQuery({ - query: allPostsQuery, - variables: allPostsQueryVars - }) - proxy.writeQuery({ - query: allPostsQuery, - data: { - ...data, - allPosts: [createPost, ...data.allPosts] - }, - variables: allPostsQueryVars - }) - } +function createPost (title, url, client) { + client.mutate({ + mutation: createPostMutation, + variables: { title, url }, + update: (proxy, { data: { createPost } }) => { + const data = proxy.readQuery({ + query: allPostsQuery, + variables: allPostsQueryVars + }) + proxy.writeQuery({ + query: allPostsQuery, + data: { + ...data, + allPosts: [createPost, ...data.allPosts] + }, + variables: allPostsQueryVars }) + } }) -})(Submit) +} From a7b5abfc80559d13edc3020b640eca465e30f9c0 Mon Sep 17 00:00:00 2001 From: Matthew Francis Brunetti Date: Fri, 21 Sep 2018 02:42:16 -0400 Subject: [PATCH 7/8] Clean up Submit module --- examples/with-apollo/components/Submit.js | 68 +++++++++++------------ 1 file changed, 31 insertions(+), 37 deletions(-) diff --git a/examples/with-apollo/components/Submit.js b/examples/with-apollo/components/Submit.js index 071230282eb8b..d0722807258c6 100644 --- a/examples/with-apollo/components/Submit.js +++ b/examples/with-apollo/components/Submit.js @@ -8,13 +8,40 @@ export default function Submit () { {client => { function handleSubmit (event) { event.preventDefault() - const form = event.target - const formData = new window.FormData(form) - createPost(formData.get('title'), formData.get('url'), client) - + const title = formData.get('title') + const url = formData.get('url') form.reset() + + client.mutate({ + mutation: gql` + mutation createPost($title: String!, $url: String!) { + createPost(title: $title, url: $url) { + id + title + votes + url + createdAt + } + } + `, + variables: { title, url }, + update: (proxy, { data: { createPost } }) => { + const data = proxy.readQuery({ + query: allPostsQuery, + variables: allPostsQueryVars + }) + proxy.writeQuery({ + query: allPostsQuery, + data: { + ...data, + allPosts: [createPost, ...data.allPosts] + }, + variables: allPostsQueryVars + }) + } + }) } return ( @@ -43,36 +70,3 @@ export default function Submit () { ) } - -const createPostMutation = gql` - mutation createPost($title: String!, $url: String!) { - createPost(title: $title, url: $url) { - id - title - votes - url - createdAt - } - } -` - -function createPost (title, url, client) { - client.mutate({ - mutation: createPostMutation, - variables: { title, url }, - update: (proxy, { data: { createPost } }) => { - const data = proxy.readQuery({ - query: allPostsQuery, - variables: allPostsQueryVars - }) - proxy.writeQuery({ - query: allPostsQuery, - data: { - ...data, - allPosts: [createPost, ...data.allPosts] - }, - variables: allPostsQueryVars - }) - } - }) -} From ed9b7ec75810240e2d2f01fcc7e1dc9518f40604 Mon Sep 17 00:00:00 2001 From: Matthew Francis Brunetti Date: Sun, 23 Sep 2018 18:49:06 -0400 Subject: [PATCH 8/8] Move large functions outside of and below components --- examples/with-apollo/components/PostList.js | 36 +++--- .../with-apollo/components/PostUpvoter.js | 102 ++++++++------- examples/with-apollo/components/Submit.js | 120 +++++++++--------- 3 files changed, 127 insertions(+), 131 deletions(-) diff --git a/examples/with-apollo/components/PostList.js b/examples/with-apollo/components/PostList.js index 54736d81717cd..2654d3234a403 100644 --- a/examples/with-apollo/components/PostList.js +++ b/examples/with-apollo/components/PostList.js @@ -29,23 +29,6 @@ export default function PostList () { if (error) return if (loading) return
Loading
- function loadMorePosts () { - fetchMore({ - variables: { - skip: allPosts.length - }, - updateQuery: (previousResult, { fetchMoreResult }) => { - if (!fetchMoreResult) { - return previousResult - } - return Object.assign({}, previousResult, { - // Append the new posts results to the old one - allPosts: [...previousResult.allPosts, ...fetchMoreResult.allPosts] - }) - } - }) - } - const areMorePosts = allPosts.length < _allPostsMeta.count return (
@@ -61,7 +44,7 @@ export default function PostList () { ))} {areMorePosts ? ( - @@ -112,3 +95,20 @@ export default function PostList () { ) } + +function loadMorePosts (allPosts, fetchMore) { + fetchMore({ + variables: { + skip: allPosts.length + }, + updateQuery: (previousResult, { fetchMoreResult }) => { + if (!fetchMoreResult) { + return previousResult + } + return Object.assign({}, previousResult, { + // Append the new posts results to the old one + allPosts: [...previousResult.allPosts, ...fetchMoreResult.allPosts] + }) + } + }) +} diff --git a/examples/with-apollo/components/PostUpvoter.js b/examples/with-apollo/components/PostUpvoter.js index 856bd1f7bc33e..996fae5577427 100644 --- a/examples/with-apollo/components/PostUpvoter.js +++ b/examples/with-apollo/components/PostUpvoter.js @@ -5,59 +5,57 @@ import gql from 'graphql-tag' export default function PostUpvoter ({ votes, id }) { return ( - {client => { - function upvotePost () { - client.mutate({ - mutation: gql` - mutation updatePost($id: ID!, $votes: Int) { - updatePost(id: $id, votes: $votes) { - id - __typename - votes - } - } - `, - variables: { - id, - votes: votes + 1 - }, - optimisticResponse: { - __typename: 'Mutation', - updatePost: { - __typename: 'Post', - id, - votes: votes + 1 - } + {client => ( + - ) - }} + button:active { + background-color: transparent; + } + button:before { + align-self: center; + border-color: transparent transparent #000000 transparent; + border-style: solid; + border-width: 0 4px 6px 4px; + content: ''; + height: 0; + margin-right: 5px; + width: 0; + } + `} + + )} ) } + +function upvotePost (votes, id, client) { + client.mutate({ + mutation: gql` + mutation updatePost($id: ID!, $votes: Int) { + updatePost(id: $id, votes: $votes) { + id + __typename + votes + } + } + `, + variables: { + id, + votes: votes + 1 + }, + optimisticResponse: { + __typename: 'Mutation', + updatePost: { + __typename: 'Post', + id, + votes: votes + 1 + } + } + }) +} diff --git a/examples/with-apollo/components/Submit.js b/examples/with-apollo/components/Submit.js index d0722807258c6..dae6f121c04db 100644 --- a/examples/with-apollo/components/Submit.js +++ b/examples/with-apollo/components/Submit.js @@ -5,68 +5,66 @@ import { allPostsQuery, allPostsQueryVars } from './PostList' export default function Submit () { return ( - {client => { - function handleSubmit (event) { - event.preventDefault() - const form = event.target - const formData = new window.FormData(form) - const title = formData.get('title') - const url = formData.get('url') - form.reset() - - client.mutate({ - mutation: gql` - mutation createPost($title: String!, $url: String!) { - createPost(title: $title, url: $url) { - id - title - votes - url - createdAt - } - } - `, - variables: { title, url }, - update: (proxy, { data: { createPost } }) => { - const data = proxy.readQuery({ - query: allPostsQuery, - variables: allPostsQueryVars - }) - proxy.writeQuery({ - query: allPostsQuery, - data: { - ...data, - allPosts: [createPost, ...data.allPosts] - }, - variables: allPostsQueryVars - }) + {client => ( +
handleSubmit(event, client)}> +

Submit

+ + + + -
- ) - }} + h1 { + font-size: 20px; + } + input { + display: block; + margin-bottom: 10px; + } + `} + + )} ) } + +function handleSubmit (event, client) { + event.preventDefault() + const form = event.target + const formData = new window.FormData(form) + const title = formData.get('title') + const url = formData.get('url') + form.reset() + + client.mutate({ + mutation: gql` + mutation createPost($title: String!, $url: String!) { + createPost(title: $title, url: $url) { + id + title + votes + url + createdAt + } + } + `, + variables: { title, url }, + update: (proxy, { data: { createPost } }) => { + const data = proxy.readQuery({ + query: allPostsQuery, + variables: allPostsQueryVars + }) + proxy.writeQuery({ + query: allPostsQuery, + data: { + ...data, + allPosts: [createPost, ...data.allPosts] + }, + variables: allPostsQueryVars + }) + } + }) +}