执行Delete Mutation后Query未重新获取数据的问题排查

问题描述 #

我写了一个简单的Delete Mutation，预期执行后通过RecentSearchesQuery重新获取所有搜索记录，但数据库里的记录已经被删除，前端的recentsData却还保留旧数据，而且执行Mutation后recentsLoading也没变成true。其他地方用相同结构的代码能正常工作，请问问题出在哪？

代码如下：

const onDeletePress = async (searchResultId: string) => {    
        await deleteSearch({
          variables: {
            _id: searchResultId,
          },
          refetchQueries: [{ query: RecentSearchesQuery }, "getUserSearches"],
        });
 };

  const {
    data: recentsData,
    error: recentsError,
    loading: recentsLoading,
  } = useQuery(RecentSearchesQuery, {
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
  });

可能的原因及解决方法 #

1. refetchQueries格式冲突或不匹配 #

你同时传了查询对象和字符串名称两种格式，这可能导致Apollo无法正确识别要重新获取的查询。另外需要确认：

• RecentSearchesQuery的操作名称是不是getUserSearches？如果你的查询定义里操作名不是这个，字符串项就会无效。
• 如果RecentSearchesQuery需要变量（比如用户ID），你在refetch的对象里没传变量，会导致获取的是另一个缓存条目，当前的recentsData不会更新。

解决方法：
统一refetchQueries的格式，要么只用查询名称（确保操作名匹配），要么传完整的查询对象并带上必要变量：

// 方式1：确保操作名匹配时用字符串
refetchQueries: ["getUserSearches"]

// 方式2：传完整查询对象（推荐，更明确）
refetchQueries: [{ 
  query: RecentSearchesQuery,
  // 如果查询需要变量，这里必须和useQuery里的变量一致
  variables: { /* 比如 userId: currentUserId */ }
}]

2. 未在refetchQueries中指定强制网络请求策略 #

你给useQuery设置了network-only，但refetchQueries默认可能用的是cache-first策略，导致没有真正发起网络请求，自然不会触发recentsLoading，也不会更新数据。

解决方法：
在refetchQueries里明确指定fetchPolicy：

refetchQueries: [{ 
  query: RecentSearchesQuery,
  fetchPolicy: "network-only"
}]

3. 缓存Key不匹配 #

Apollo的缓存是基于查询+变量生成唯一Key的，如果useQuery里传了变量（比如用户ID），但refetchQueries里没传相同变量，会生成不同的缓存Key，当前的recentsData绑定的缓存不会被更新。

解决方法：
确保refetchQueries中的变量和useQuery完全一致，比如：

// 假设useQuery里是这样的
const { data: recentsData } = useQuery(RecentSearchesQuery, {
  variables: { userId: currentUserId },
  fetchPolicy: "network-only",
});

// 那refetch的时候必须传相同变量
refetchQueries: [{ 
  query: RecentSearchesQuery,
  variables: { userId: currentUserId },
  fetchPolicy: "network-only"
}]

4. 改用update函数手动更新缓存（更可靠） #

依赖refetchQueries有时候会因为缓存策略或匹配问题失效，手动更新缓存是更直接的方式，不需要重新请求网络，数据会立刻更新：

await deleteSearch({
  variables: { _id: searchResultId },
  update(cache, { data }) {
    // 读取当前缓存中的搜索记录
    const existingData = cache.readQuery({ query: RecentSearchesQuery });
    if (!existingData?.getUserSearches) return;

    // 过滤掉被删除的条目
    const updatedSearches = existingData.getUserSearches.filter(
      item => item._id !== searchResultId
    );

    // 将更新后的数据写回缓存
    cache.writeQuery({
      query: RecentSearchesQuery,
      data: { getUserSearches: updatedSearches }
    });
  }
});

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