如何让React Query的refetchQueries无论缓存是否存在都触发？

要解决这个问题，核心是让React Query无论["products"]查询是否已缓存，都主动发起请求获取最新产品列表。refetchQueries只会触发已存在的查询（即之前执行过并缓存过的），而我们可以用fetchQuery来主动执行查询，同时将结果存入缓存。

修改后的代码 #

import { useMutation, useQueryClient } from "@tanstack/react-query";
import api from "./Api";

// 单独抽离获取产品列表的函数，方便复用
const fetchProducts = async () => {
  const res = await api.get("/products");
  return res.data;
};

export const useUploadProduct = () => {
  const qc = useQueryClient();

  return useMutation({
    mutationFn: async (newProduct) => {
      const res = await api.post("/products", newProduct);
      return res.data;
    },

    onSuccess: async () => {
      // 用fetchQuery主动触发产品列表查询，无论缓存是否存在
      await qc.fetchQuery({
        queryKey: ["products"],
        queryFn: fetchProducts,
      });
    },
  });
};

为什么这样有效 #

• fetchQuery会直接发起请求获取产品列表，不管之前是否执行过["products"]查询。
• 请求完成后，结果会自动存入React Query的缓存，后续访问产品页时，组件会直接读取最新的缓存数据。
• 异步执行fetchQuery时，加上async/await可以确保请求完成后再进行后续操作（比如页面跳转）。

另一种可选方案：结合invalidateQueries和refetchQueries #

如果希望保留refetchQueries的逻辑，可以先标记["products"]查询为无效，再强制触发刷新：

onSuccess: () => {
  qc.invalidateQueries({ queryKey: ["products"] });
  qc.refetchQueries({ queryKey: ["products"], force: true });
}

不过这种方式在查询未缓存时，仍然需要依赖后续组件挂载来触发请求，不如fetchQuery直接主动发起请求来得可靠。

内容的提问来源于stack exchange，提问作者Muh-Osman