blob: 4d68d5eefc4b84e5f15b51c928f2d9a1f4029fb5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
import React 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!) {
deleteItem(id: $id) {
id
title
description
}
}
`;
class DeleteItem extends React.Component {
static propTypes = {
id: PropTypes.string.isRequired,
};
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
};
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 }) => (
<button
onClick={() => {
if (confirm('Are you sure you want to delete this item?')) {
removeItem();
}
}}
>
{error ? error.message : '× Delete Item'}
</button>
)}
</Mutation>
);
}
}
export default withRouter(DeleteItem);
export { DELETE_ITEM_MUTATION };
|
