删除项后更新Apollo缓存触发Invariant Violation错误求助

你遇到的问题核心是Apollo Client缓存匹配失败，再加上数据结构处理有误，我来帮你一步步修复：

错误原因拆解 #

1. 缓存键不匹配：Apollo Client是用「查询文档 + 查询变量」的组合作为缓存唯一标识的。你当初调用featuredPlaylistsGroupsQuery时肯定带了变量（比如active、regions这类参数），但在update函数里调用cache.readQuery时只传了query，没传变量，导致Apollo去查找无变量的featuredPlaylistsGroups({})缓存项，自然找不到就抛出了错误。
2. 数据结构处理错误：你直接对data调用filter是错的——data是包含featuredPlaylistsGroups数组的顶层对象，不是数组本身。

修复步骤 #

1. 保留初始查询的变量 #

首先在你获取播放列表分组的地方，把查询变量存下来，方便后续更新缓存时复用：

// 假设这是你获取列表的useQuery代码
const { data: groupsData, variables: queryVariables } = useQuery(featuredPlaylistsGroupsQuery, {
  variables: {
    // 这里是你的实际查询参数，比如active: true, regions: ["US"]等
  },
});

2. 修正Mutation的update函数 #

接下来修改你的deleteFn，确保读取和写入缓存时都带上相同变量，同时正确处理数据结构：

const deleteFn = useMutation<FeaturedPlaylistGroupDelete, FeaturedPlaylistGroupDeleteVariables>(deleteQuery, {
  update: (cache, mutationResult) => {
    // 读取缓存必须传入和初始查询一致的变量
    const cacheData = cache.readQuery({ 
      query: featuredPlaylistsGroupsQuery,
      variables: queryVariables,
    });

    // 空值兜底，避免运行时报错
    if (!cacheData?.featuredPlaylistsGroups || !mutationResult.data?.featuredPlaylistGroupDelete) {
      return;
    }

    // 过滤掉被删除的条目
    const updatedGroups = cacheData.featuredPlaylistsGroups.filter(
      item => item.id !== mutationResult.data.featuredPlaylistGroupDelete.id
    );

    // 写入缓存时同样带变量，且保持和查询一致的数据结构
    cache.writeQuery({
      query: featuredPlaylistsGroupsQuery,
      variables: queryVariables,
      data: {
        featuredPlaylistsGroups: updatedGroups,
      },
    });
  },
});

额外提醒 #

• 如果你的查询变量是动态变化的（比如用户调整筛选条件），建议用useRef保存最新变量，避免更新时用旧变量导致缓存不匹配。
• 始终保证缓存写入的结构和GraphQL查询返回的结构完全一致，不能直接修改顶层对象，要针对查询返回的数组字段做修改。

内容的提问来源于stack exchange，提问作者Edgaras Karka