Question

我在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 });
    },
  });
}

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

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

Answer 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 },
      });

    },
  });
}

成功完成阿波罗缓存写入后查询数据不会更新

1 个答案: