apollo缓存写入成功后查询数据不更新答案

【问题标题】：Query data doesn't update after successful apollo cache writeapollo缓存写入成功后查询数据不更新
【发布时间】：2020-06-05 06:29:35
【问题描述】：

我对我的 App.js 有疑问：

import { gql } from 'apollo-boost';

const ALL_ITEMS_QUERY = gql`
  query ALL_ITEMS_QUERY {
    challenges {
      id
      title
    }
    goals {
      id
      title
      completed
      createdAt
      updatedAt
      steps {
        id
        completed
        title
      }
    }
  }
`;

我正在寻找编写一个简单的 deleteGoal 突变：

const DeleteWrapper = (props) => {
  const [deleteGoal, { data }] = useMutation(DELETE_ITEM_MUTATION, {
    update(cache, payload) {
      const data = cache.readQuery({ query: ALL_ITEMS_QUERY });

      data.goals = data.goals.filter(
        (goal) => goal.id !== payload.data.deleteGoal.id
      );

      cache.writeQuery({ query: ALL_ITEMS_QUERY, data });
    },
  });
}

该函数正确返回修改后的数组，但该项目永远不会从前端列表中消失。我有一种预感，这与一次查询多个类别有关（目标和挑战，而不仅仅是目标）。

即使缓存似乎被正确修改，为什么项目永远不会消失，为什么重新渲染永远不会发生？

【问题讨论】：

ziele 未在查询中使用？
您可以升级到 Apollo Client 3.0（Apollo 推荐）并使用 cache.evict(ziel_to_delete.id);
@xadm 已修复，我使用了占位符。一切都在按应有的方式使用。
@Spray'n'Pray 升级到 Beta 并不完全符合我的预期。既然现在一切都正常运行了，那新版本又何必忽略缓存的变化呢？
查询使用情况？ - 需要更新什么？如何渲染？等

标签： reactjs apollo react-apollo

【解决方案1】：

经过反复试验，我发现我必须将确切的 data 对象布局到 writeQuery 函数。我真的不明白为什么，因为挑战对象在查询后保持不变。否则我无法完成这项工作。

const DeleteWrapper = (props) => {
  const [deleteGoal] = useMutation(DELETE_ITEM_MUTATION, {
    update(cache, { data: { deleteGoal} }) {
      const { goals, challenges } = cache.readQuery({ query: ALL_ITEMS_QUERY });

      const newArr = goals.filter((goal) => goal.id !== deleteGoal.id);

      cache.writeQuery({
        query: ALL_ITEMS_QUERY,
        data: { challenges, goals: newArr },
      });

    },
  });
}

【讨论】：

同一个对象发生了变异 - 没有检测到变化......但如果没有变化，你不需要传播挑战......data: { challenges, goals: newArr } - 使用现有挑战和新目标创建全新的对象跨度>
@xadm 已编辑，干杯