React Query中onSuccess、onError、onSettled已弃用，替代方案是什么？

React Query 已弃用 useQuery 配置项中的 onSuccess、onError 和 onSettled 回调，官方推荐通过声明式监听查询状态替代命令式回调，更贴合 React 的副作用处理范式。

具体替代方案 #

• 替代 onSuccess：监听 isSuccess 和 data 状态，查询成功完成时执行逻辑
• 替代 onError：监听 isError 和 error 状态，查询出错时执行逻辑
• 替代 onSettled：监听 isFetching 状态，查询结束（无论成功或失败）时执行逻辑

代码示例 #

import { useQuery, useEffect } from '@tanstack/react-query';

const { 
  isError, error, data, refetch, isFetching, isSuccess 
} = useQuery(
  ["posts"],
  fetchPosts,
  { enabled: false }
);

// 替代 onSuccess
useEffect(() => {
  if (isSuccess && data) {
    // 原 onSuccess 逻辑写在此处
    console.log('查询成功，数据：', data);
  }
}, [isSuccess, data]);

// 替代 onError
useEffect(() => {
  if (isError && error) {
    // 原 onError 逻辑写在此处
    console.error('查询失败，错误：', error);
  }
}, [isError, error]);

// 替代 onSettled
useEffect(() => {
  // 查询从加载状态转为非加载状态时触发
  if (!isFetching) {
    // 原 onSettled 逻辑写在此处
    console.log('查询已结束');
  }
}, [isFetching]);

额外说明 #

若需区分查询是首次加载还是重新触发，可结合 isPreviousData 状态或自定义变量判断，适配更复杂的业务场景。

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