React Query调用invalidateQueries后未获取最新数据，求助排查

你的问题出在invalidateQueries的查询键匹配逻辑上：

• useGetData的查询键是["data-item", id]（带具体ID的数组），而你在useSetLike的onSuccess里调用invalidateQueries({ queryKey: ["data-item"] })时，默认是精确匹配查询键，只会命中键完全等于["data-item"]的查询，根本匹配不到带ID的目标查询，所以不会触发数据刷新。

切换到其他条目再返回能看到更新，是因为切换后原查询变为非活跃状态，返回时React Query会重新发起请求获取最新数据；而cacheTime:0没用是因为它控制的是非活跃查询的缓存保留时间，对活跃查询的刷新逻辑没有影响。

两种可行的修复方案 #

方案1：精确刷新当前点赞的条目（推荐） #

利用mutation的variables参数（就是当前点赞的ID），构造精确匹配的查询键，只刷新对应条目，性能更优：

const useSetLike = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: (id: number) => {
      return setDataLike(id);
    },
    onSuccess: (data, variables) => {
      // variables就是当前点赞的id
      queryClient.invalidateQueries({ queryKey: ["data-item", variables] });
    },
  })
};

方案2：批量刷新所有data-item相关条目 #

如果需要一次性刷新所有ID的data-item查询，设置exact: false开启前缀匹配：

const useSetLike = () => {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: (id: number) => {
      return setDataLike(id);
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ 
        queryKey: ["data-item"], 
        exact: false // 开启前缀匹配，匹配所有以["data-item"]开头的查询键
      });
    },
  })
};

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