Update both orderBy queries on add or delete

GraphQLGuide · Aug 7, 2018 · 504646f · 504646f
1 parent 2102ed5
commit 504646f
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/components/Review.js b/src/components/Review.js
@@ -72,7 +72,7 @@ class Review extends Component {
 
   delete = () => {
     this.closeDeleteConfirmation()
-    this.props.delete(this.props.review.id, this.props.orderBy).catch(e => {
+    this.props.delete(this.props.review.id).catch(e => {
       if (find(e.graphQLErrors, { message: 'unauthorized' })) {
         alert('👮‍♀️✋ You can only delete your own reviews!')
       }
@@ -181,8 +181,7 @@ class Review extends Component {
 Review.propTypes = {
   review: propType(REVIEW_ENTRY).isRequired,
   favorite: PropTypes.func.isRequired,
-  user: PropTypes.object,
-  orderBy: PropTypes.string.isRequired
+  user: PropTypes.object
 }
 
 const FAVORITE_REVIEW_MUTATION = gql`
@@ -240,7 +239,7 @@ const DELETE_REVIEW_MUTATION = gql`
 
 const withDeleteMutation = graphql(DELETE_REVIEW_MUTATION, {
   props: ({ mutate }) => ({
-    delete: (id, orderBy) =>
+    delete: id =>
       mutate({
         variables: { id },
         optimisticResponse: {
@@ -249,13 +248,21 @@ const withDeleteMutation = graphql(DELETE_REVIEW_MUTATION, {
         update: store => {
           const query = {
             query: REVIEWS_QUERY,
-            variables: { limit: 10, orderBy }
+            variables: { limit: 10, orderBy: 'createdAt_DESC' }
           }
 
           let data = store.readQuery(query)
           remove(data.reviews, { id })
           store.writeQuery({ ...query, data })
 
+          query.variables.orderBy = 'createdAt_ASC'
+
+          try {
+            data = store.readQuery(query)
+            remove(data.reviews, { id })
+            store.writeQuery({ ...query, data })
+          } catch (e) {}
+
           data = store.readQuery({ query: READ_USER_FAVORITES })
           remove(data.currentUser.favoriteReviews, { id })
           store.writeQuery({ query: READ_USER_FAVORITES, data })

diff --git a/src/components/ReviewForm.js b/src/components/ReviewForm.js
@@ -162,9 +162,14 @@ const withAddReview = graphql(ADD_REVIEW_MUTATION, {
             variables: { limit: 10, orderBy: 'createdAt_DESC' }
           }
 
-          const data = store.readQuery(query)
+          let data = store.readQuery(query)
           data.reviews.unshift(newReview)
           store.writeQuery({ ...query, data })
+
+          query.variables.orderBy = 'createdAt_ASC'
+          data = store.readQuery(query)
+          data.reviews.push(newReview)
+          store.writeQuery({ ...query, data })
         }
       })
     }

diff --git a/src/components/ReviewList.js b/src/components/ReviewList.js
@@ -32,19 +32,14 @@ class ReviewList extends Component {
   }
 
   render() {
-    const { reviews, user, orderBy } = this.props
+    const { reviews, user } = this.props
 
     return (
       <div className="Reviews-list">
         <div className="Reviews-content">
           {reviews &&
             reviews.map(review => (
-              <Review
-                key={review.id}
-                review={review}
-                user={user}
-                orderBy={orderBy}
-              />
+              <Review key={review.id} review={review} user={user} />
             ))}
         </div>
         <div className="Spinner" />