React Query：执行Mutation后嵌套查询键无法正确更新的问题

你遇到的问题是React Query默认行为导致的：调用invalidateQueries时，它只会对**当前处于活跃状态（已挂载）**的查询执行即时重取；非活跃的查询（比如未查看的archive标签对应查询）只会被标记为"过期"，不会立即发起请求更新缓存。所以切换到archive标签时，会先读取缓存旧数据，直到组件挂载触发重取完成后才显示新数据，产生延迟。

解决方案：启用refetchInactive选项 #

在invalidateQueries配置中添加refetchInactive: true，所有匹配查询前缀的缓存（无论是否活跃）都会立即发起请求更新，切换标签时就能直接获取最新数据。

修改后的Mutation代码：

const { mutate, isLoading } = useMutation({
    mutationFn: () => archiveNotification(notification?.id),
    onSuccess: async () => {
      return queryClient
        .invalidateQueries({
          queryKey: ["me", "notifications"],
          refetchInactive: true, // 新增此配置，强制刷新非活跃查询
        })
        .then(() => onClose());
    },
});

补充说明 #

• refetchInactive: true会遍历所有匹配["me", "notifications"]前缀的缓存查询，不管对应组件是否挂载，都会立即触发后台请求更新缓存，确保所有筛选条件下的数据都是最新的。
• 若不想全局刷新前缀匹配的查询，也可以明确指定要刷新的两个筛选条件对应查询Key（扩展性较差，新增筛选条件时需修改代码）：

const { mutate, isLoading } = useMutation({
    mutationFn: () => archiveNotification(notification?.id),
    onSuccess: async () => {
      // 明确刷新两个筛选条件的查询
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["me", "notifications", "all"] }),
        queryClient.invalidateQueries({ queryKey: ["me", "notifications", "archive"] })
      ]);
      onClose();
    },
});

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