React-Query中refetch未触发useEffect问题咨询及解决方法

行为是否符合预期？ #

不符合预期，你的代码存在依赖项配置错误的问题。

错误原因 #

你在useEffect中仅监听data，但React Query的data具备引用稳定性——只有当请求返回全新数据时，它的引用才会改变。调用refetch后，即便后台数据更新，若React Query的缓存机制未触发data引用变更，useEffect就不会执行。另外，仅以data作为依赖，无法精准捕获refetch完成的时机。

修复方案 #

1. 监听请求成功状态 #

修改useEffect的依赖数组，加入React Query提供的isSuccess状态，每次请求（包括refetch）成功时都会触发回调：

useEffect(() => {
  console.log("data updated", data); // 对应原第111行日志
}, [data, isSuccess]);

2. 直接在refetch回调中处理 #

既然是在保存成功后调用refetch，可以直接利用refetch返回的Promise，在请求完成后直接获取最新数据：

const handleSave = async () => {
  // 执行保存逻辑
  await saveOperation();
  // 调用refetch并等待完成
  const refetchResult = await refetch();
  if (refetchResult.isSuccess) {
    console.log("最新数据：", refetchResult.data);
    // 此处直接处理最新数据，无需依赖useEffect
  }
};

3. 使用useQuery的onSuccess回调 #

在useQuery的配置中添加onSuccess，每次请求（含refetch）成功时自动执行该回调，省去额外的useEffect：

const { data, refetch } = useQuery({
  queryKey: ["your-data-key"],
  queryFn: yourFetchFunction,
  onSuccess: (newData) => {
    console.log("data updated", newData); // 替代原第111行日志逻辑
  }
});

总结 #

useEffect未触发的核心原因是依赖项设置不合理，React Query的data引用不会在每次refetch时都发生变化（比如缓存命中场景）。通过监听isSuccess、利用refetch的Promise或onSuccess回调，能更可靠地捕获数据更新并处理。

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