时间戳

首页 > 解决方案 > 带有 writeQuery 的 Apollo 客户端突变未触发 UI 更新

apollo - 带有 writeQuery 的 Apollo 客户端突变未触发 UI 更新

问题描述

我有一个突变来创建一个新的卡片对象，我希望它应该在更新后添加到用户界面中。缓存、Apollo Chrome 工具和控制台日志反映了这些更改，但 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
  }
`;

标签： apolloreact-apolloapollo-client

解决方案

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

希望这对其他人有帮助。

推荐阅读