具有 writeQuery 的 Apollo 客户端突变不触发 UI 更新

Question

我有一个创建新卡片对象的突变，我希望它应该在更新后添加到用户界面。缓存、Apollo Chrome 工具和控制台日志记录反射(reflect)了更改，但 UI 并非没有手动重新加载。

 const [createCard, { loading, error }] = useMutation(CREATE_CARD, {
    update(cache, { data: { createCard } }) {
      let localData = cache.readQuery({
        query: CARDS_QUERY,
        variables: { id: deckId }
      });

      localData.deck.cards = [...localData.deck.cards, createCard];
;

  client.writeQuery({
    query: CARDS_QUERY,
    variables: { id: parseInt(localData.deck.id, 10) },
    data: { ...localData }
  });

我已将 cache.writeQuery 更改为 client.writeQuery，但这并没有解决问题。

作为引用，这是我正在运行的查询...

const CARDS_QUERY = gql`
  query CardsQuery($id: ID!) {
    deck(id: $id) {
      id
      deckName
      user {
        id
      }
      cards {
        id
        front
        back
        pictureName
        pictureUrl
        createdAt
      }
    }
    toggleDeleteSuccess @client
  }
`;

Answer 1

我在没有 cloneDeep 方法的情况下得到了相同的结果。仅使用传播运算符就解决了我的问题。

const update = (cache, {data}) => {
  const queryData = cache.readQuery({query: USER_QUERY})
  const cartItemId = data.cartItem.id
  queryData.me.cart = queryData.me.cart.filter(v => v.id !== cartItemId)
  cache.writeQuery({query: USER_QUERY, data: {...queryData}})
}

希望这对其他人有帮助。