Question

我有一个变体来创建一个新的卡对象，我希望它应该在更新后添加到用户界面中。缓存，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
  }
`;

Answer 1

好，终于遇到了很长的Github thread，讨论了他们针对同一问题的解决方案。最终对我有用的解决方案是深度克隆数据对象（我个人使用Lodash cloneDeep），将突变的数据对象传递给cache.writeQuery之后，它最终将更新UI。最终，考虑到缓存反映了更改，似乎仍然应该有一种方法来触发UI更新。

在此之后，查看我之前的原始问题...

  const [createCard, { loading, error }] = useMutation(CREATE_CARD, {
    update(cache, { data: { createCard } }) {
      const localData = cloneDeep(  // Lodash cloneDeep to make a fresh object
        cache.readQuery({
          query: CARDS_QUERY,
          variables: { id: deckId }
        })
      );

      localData.deck.cards = [...localData.deck.cards, createCard];  //Push the mutation to the object

      cache.writeQuery({
        query: CARDS_QUERY,
        variables: { id: localData.deck.id },
        data: { ...localData }  // Cloning ultimately triggers the UI update since writeQuery now sees a new object.
      });
    },
```

Answer 2

我没有使用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}})
}

希望这对其他人有帮助。

使用writeQuery的Apollo客户端突变未触发用户界面更新

2 个答案: