TanStack Query缓存失效未移除queryKey，无法重新获取数据？

我在React项目中使用TanStack Query的useQuery和useMutation钩子处理数据获取与更新，遇到以下问题：更新数据后调用queryClient.invalidateQueries()，指定的queryKey仍存在于缓存中，且未触发组件重渲染。

复现场景 #

通过useContext存储状态（未连接数据库）的最小示例复现：

• 进入集合页面，点击"view"图标进入单个集合页面（queryKey为['singleCollection', 'NewHotness']）
• 执行更新操作（添加新内容到集合）
• 控制台输出显示该queryKey在调用invalidateQueries()前后均存在于缓存中

核心代码（useMutate钩子） #

import axios from 'axios';
import { get, filter } from 'lodash-es';
import { useContext } from 'react';
import { UseMutationResult, useMutation, useQueryClient } from 'react-query';
import { CollectionContext } from '../contexts/collectionContexts';

export default function useMutate() {
  const { collections, setCollections } = useContext(CollectionContext);
  const queryClient = useQueryClient();
  const updateCollectionMutation: UseMutationResult<any> = useMutation({
    mutationFn: async (updatedCollection) => {
      const nonTargetCollections = filter(collections, (collection) => {
        return collection?.name !== updatedCollection?.name;
      });
      const updatedCollections = [...nonTargetCollections, updatedCollection];
      console.log('deleteMe updatedCollections are: ');
      console.log(updatedCollections);
      const prom = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(setCollections(updatedCollections));
        }, 2000);
      });
      return prom;
    },
    onSuccess: () => {
      console.log('deleteMe onSuccess entered');
      const queryCache = queryClient.getQueryCache();
      const queryKey = ['singleCollection', 'NewHotness'];
      let queryState = queryCache.find(queryKey);
      if (queryState) {
        console.log(`Before Query with key ${queryKey} is in the cache.`);
      } else {
        console.log(`Before Query with key ${queryKey} is NOT in the cache.`);
      }
      queryClient.invalidateQueries();
      queryState = queryCache.find(queryKey);
      if (queryState) {
        console.log(`After Query with key ${queryKey} is in the cache.`);
      } else {
        console.log(`After Query with key ${queryKey} is NOT in the cache.`);
      }
    },
    onError: (error) => {
      console.log('deleteMe and error is: ');
      console.log(error);
    },
  });

  const mutate = (updatedCollection) =>
    updateCollectionMutation.mutateAsync(updatedCollection);

  return { updateCollectionMutation, mutate };
}

问题分析与解决方案 #

1. 对invalidateQueries的误解 #

invalidateQueries 不会删除缓存条目，它的作用是将查询标记为「过时（stale）」：

• 若组件处于活跃挂载状态，会自动触发重新查询
• 若组件已卸载，缓存会保留但标记为过时，下次组件挂载时才会重新获取数据
  你看到缓存中仍存在目标queryKey是正常行为，TanStack Query默认不会主动删除缓存。

2. 同步检查缓存的时序错误 #

invalidateQueries 是异步操作，你在调用后立即查询缓存状态，此时标记过时/重新查询的流程尚未完成，因此看到的仍是操作前的状态。如需验证，可通过queryState.state.status查看查询状态，或在组件中监听useQuery返回的isFetching/isStale字段。

3. 适配本地状态场景的解决方案 #

结合你用useContext维护本地状态的情况，推荐两种方案：

方案A：直接更新缓存（最优）

因为你的更新是本地状态操作，无实际API请求，可直接用setQueryData更新对应queryKey的缓存，组件会立刻重渲染：

onSuccess: () => {
  const queryKey = ['singleCollection', 'NewHotness'];
  // 从context获取最新的目标集合数据
  const latestCollection = collections.find(c => c.name === 'NewHotness');
  // 直接更新缓存
  queryClient.setQueryData(queryKey, latestCollection);
}

方案B：确保invalidateQueries触发重渲染

若坚持使用invalidateQueries，需注意两点：

• 确保useQuery的queryFn每次执行都能读取到最新的context状态（避免闭包捕获旧值）
• 配置refetchType: 'active'强制活跃查询立即重新执行：

queryClient.invalidateQueries({
  queryKey: ['singleCollection', 'NewHotness'],
  refetchType: 'active'
});

4. 修复mutationFn的不合理写法 #

你的mutationFn中返回resolve(setCollections(updatedCollections))存在问题，setCollections是React状态更新函数，无返回值，应改为：

mutationFn: async (updatedCollection) => {
  const nonTargetCollections = collections.filter(c => c.name !== updatedCollection.name);
  const updatedCollections = [...nonTargetCollections, updatedCollection];
  await new Promise(resolve => setTimeout(resolve, 2000)); // 模拟异步操作
  setCollections(updatedCollections);
  return updatedCollection; // 返回更新后的数据，供后续逻辑使用
}

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