Apollo客户端突变，writeQuery未触发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
  }
`;

---

好的，最后我们遇到了一个很长的问题，讨论了他们对同一问题的解决方案。最终对我有效的解决方案是深度克隆数据对象（我个人使用了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.
      });
    },
```

---

我没有使用

cloneDeep

方法处理相同的结果。仅仅使用spread操作符就解决了我的问题

const update=（缓存，{data}）=>{
const queryData=cache.readQuery（{query:USER\u query}）
常量cartItemId=data.cartItem.id
queryData.me.cart=queryData.me.cart.filter（v=>v.id！==cartItemId）
writeQuery（{query:USER_query，data:{…queryData}}）
}

---

希望这对其他人有所帮助。

您如何在应用程序的其他地方请求该查询--

useQuery

？是否为该查询设置了

no cache

策略？我使用最终遇到的解决方案进行了更新，显然深度克隆数据对象是触发UI更新的常用方法。我使用了一个相当基本的useQuery来显示卡片组中的闪存卡列表，并使用自定义的弹出模式组件来添加、编辑或删除卡片。我的提取策略是默认的。编辑和删除更新可以很好地更新缓存和UI，而无需使用refetch，这是在将卡片添加到现有的卡片组中，我遇到了麻烦。当你改变某些对象时，你应该进行浅拷贝，而不是深度拷贝。你不需要克隆所有的东西。