Apollo: метод Push (), вызывающий размонтирование компонента при обновлении optimisticResponse в Mutation

Question

Может ли кто-нибудь рискнуть предположить, почему следующий оптимистический ответ / обновление кода (вопрос продолжается после кода):

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 (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>
    );
  }
}

Родитель элемента (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;

вызывает повторное отображение моего пользовательского интерфейса (размонтирование компонента) после добавления элемента в пустую корзину (см. Инструкции по копированию)?

1. Перейти кhttps://flamingo -next-production.herokuapp.com .
2. , используя логин, Имя пользователя: testing123@123.com, Пароль: testing123.
3. нажмите «Моя корзина»связать и удалить любые элементы там.Оставьте окно корзины открытым.
4. нажмите Shop ссылку и добавьте предмет.Наблюдайте за открытым окном корзины / пользовательским интерфейсом после нажатия кнопки «Добавить» (возможно, вам придется подождать несколько минут, прежде чем наблюдать за изменением).

Почему это происходит и каков наилучший способ исправить это ??