Apollo: Push() method causing component to unmount on optimisticResponse update in Mutation - reactjs

Question

Can Anyone hazard a guess as to why the following optimisticResponse/update code (question continues after code):
AddToCart.js
const ADD_TO_CART_MUTATION = gql`
mutation addToCart($id: ID!) {
addToCart(id: $id) {
id
quantity
}
}
`;
class AddToCart extends React.Component {
outOfStock(){
alert('This item is out of stock.');
};
update = (cache, { data: { addToCart } }) => {
const data = cache.readQuery({ query: CURRENT_USER_QUERY });
data.me.cart.push(addToCart);
cache.writeQuery({ query: CURRENT_USER_QUERY, data });
};
render() {
const { id, quantity, title, image, price } = this.props;
return (
<Mutation
mutation={ADD_TO_CART_MUTATION}
variables={{
id,
}}
optimisticResponse={{
__typename: 'Mutation',
addToCart: {
__typename: 'CartItem',
id: '-1',
quantity: 1,
item: {
__typename: 'Item',
id,
price,
image,
title,
description: 'test',
mainDescription: 'test',
quantity,
}
}
}}
update={this.update}
refetchQueries={[{ query: CURRENT_USER_QUERY }, { query: ALL_ITEMS_QUERY }]}
>
{(addToCart, { loading }) => {
if (quantity >= 1) {
return (<button disabled={loading} onClick={() => {
addToCart().catch(err => alert(err.message));
}}>
Add{loading && 'ing'} To Cart 🛒
</button>)
} else {
return (<button>
Out of Stock 🛒
</button>)
}
}}
</Mutation>
);
}
}
export default AddToCart;
AddToCart parent component (Item.js)
export default class Item extends Component {
static propTypes = {
item: PropTypes.object.isRequired,
};
render() {
const { item } = this.props;
return (
<User>
{({ data: { me } }) => {
let hasPerms;
hasPerms = (me && me === null) ? false : (me && me.permissions.some(permission => ['ADMIN'].includes(permission)));
return (
<ItemStyles>
{item.image && <img src={item.image} alt={item.title} />}
<Title>
<Link
href={{
pathname: '/item',
query: { id: item.id },
}}
>
<a>{item.title}</a>
</Link>
</Title>
<PriceTag>{formatMoney(item.price)}</PriceTag>
<p>{item.description} { (item.quantity <= 10 && item.quantity !== 0) && `- (${item.quantity} in stock)` }</p>
<div className="buttonList">
<AddToCart id={item.id} quantity={item.quantity} image={item.image} title={item.title} price={item.price} />
{hasPerms && (
<>
<Link
href={{
pathname: 'update',
query: { id: item.id },
}}
>
<a>Edit ✏️</a>
</Link>
<DeleteItem id={item.id}>Delete This Item</DeleteItem>
</>
)}
</div>
<div className="buttonList">
</div>
</ItemStyles>
);
}}
</User>
);
}
}
Item parent (Items.js)
class Items extends Component {
render() {
return (
<Center>
<Pagination page={this.props.page} />
<Query
query={ALL_ITEMS_QUERY}
variables={{
skip: this.props.page * perPage - perPage,
}}
>
{({ data, error, loading }) => {
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ItemsList>{data.items.map((item, i) => <Item item={item} key={item.id}></Item>)}</ItemsList>
);
}}
</Query>
<Pagination page={this.props.page} />
</Center>
);
}
}
export default Items;
causes my UI to rerender (component unmounts) after adding an item to an empty cart (See instructions to replicate)?
Go to https://flamingo-next-production.herokuapp.com.
login using, Username: testing123#123.com, Password:testing123.
click 'My cart' link and delete any items in there. Leave cart window open.
click Shop link and add an item. Observe the open cart window/UI after you have clicked add (You may have to wait a few moments before observing change).
Why does this happen and what's the best way to rectify it??