1 files changed, 17 insertions, 38 deletions

diff --git a/finished-application/frontend/components/DeleteItem.js b/finished-application/frontend/components/DeleteItem.js
index 4d68d5e..e5e4752 100644
--- a/finished-application/frontend/components/DeleteItem.js
+++ b/finished-application/frontend/components/DeleteItem.js
@@ -1,65 +1,45 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Mutation } from 'react-apollo';
-import PropTypes, { number } from 'prop-types';
 import gql from 'graphql-tag';
-import { withRouter } from 'next/router';
 import { ALL_ITEMS_QUERY } from './Items';
-import { PAGINATION_QUERY } from './Pagination';
-import { perPage } from '../config';
 
 const DELETE_ITEM_MUTATION = gql`
-  mutation deleteItem($id: ID!) {
+  mutation DELETE_ITEM_MUTATION($id: ID!) {
     deleteItem(id: $id) {
       id
-      title
-      description
     }
   }
 `;
 
-class DeleteItem extends React.Component {
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-  };
-
+class DeleteItem extends Component {
   update = (cache, payload) => {
-    const deletedItem = payload.data.deleteItem;
-    let { page = 1 } = this.props.router.query;
-    page = parseFloat(page);
-    const skip = page * perPage - perPage;
-    const variables = { skip };
-    const data = cache.readQuery({ query: ALL_ITEMS_QUERY, variables });
-    // filter this one out
-    data.items = data.items.filter(item => item.id !== deletedItem.id);
-    // write the data back to the cache
-    console.log(data.items);
-    cache.writeQuery({ query: ALL_ITEMS_QUERY, data, variables });
-    // FYI Pagination is broken with Apollo currently - will make a followup video
+    // manually update the cache on the client, so it matches the server
+    // 1. Read the cache for the items we want
+    const data = cache.readQuery({ query: ALL_ITEMS_QUERY });
+    console.log(data, payload);
+    // 2. Filter the deleted itemout of the page
+    data.items = data.items.filter(item => item.id !== payload.data.deleteItem.id);
+    // 3. Put the items back!
+    cache.writeQuery({ query: ALL_ITEMS_QUERY, data });
   };
-
   render() {
     return (
       <Mutation
         mutation={DELETE_ITEM_MUTATION}
         variables={{ id: this.props.id }}
-        refetchQueries={[
-          {
-            query: ALL_ITEMS_QUERY,
-            variables: { skip: (this.props.router.query.page || 1) * perPage - perPage },
-          },
-          { query: PAGINATION_QUERY },
-        ]}
         update={this.update}
       >
-        {(removeItem, { error }) => (
+        {(deleteItem, { error }) => (
           <button
             onClick={() => {
               if (confirm('Are you sure you want to delete this item?')) {
-                removeItem();
+                deleteItem().catch(err => {
+                  alert(err.message);
+                });
               }
             }}
           >
-            {error ? error.message : '× Delete Item'}
+            {this.props.children}
           </button>
         )}
       </Mutation>
@@ -67,5 +47,4 @@ class DeleteItem extends React.Component {
   }
 }
 
-export default withRouter(DeleteItem);
-export { DELETE_ITEM_MUTATION };
+export default DeleteItem;