如何重置Redux Toolkit Query的查询状态（非Mutation）？

RTK Query的普通useQuery钩子没有内置的reset方法，因为它的状态（isLoading/isError/isSuccess等）是和缓存绑定的，而非单次操作的临时状态。但可以通过以下几种方式实现你需要的状态重置需求：

方案1：使用useLazyQuery替代useQuery #

useLazyQuery是手动触发的查询钩子，它的返回值中包含和Mutation钩子一致的reset方法，能直接重置操作状态。

示例代码：

// 替换useGetOneSale为useLazyQuery
const [triggerGetOneSale, { isLoading, isError, isSuccess, reset }] = useLazyQuery(getOneSale);

// 组件初始化时自动触发查询，模拟原useQuery的自动执行行为
useEffect(() => {
  triggerGetOneSale();
}, []);

// 组件卸载/模态框关闭时重置状态
useEffect(() => {
  return () => reset();
}, []);

// 原有逻辑直接复用这些状态
useEffect(()=>{
   switch(true){
      case isSuccess:
        setText('Transaction completed successfully!')
      break
      default:
        setText('Please Enter The client id')
   }
}, [isSuccess])

方案2：用本地状态包装Query状态 #

如果不想切换到useLazyQuery，可以通过React的useState将Query的状态包装成本地可控制的状态，自行实现重置逻辑。

示例代码：

const { isSuccess: queryIsSuccess, isLoading, isError } = useGetOneSale();
// 用本地状态同步Query的isSuccess
const [isSuccess, setIsSuccess] = useState(queryIsSuccess);

// 同步Query状态到本地
useEffect(() => {
  setIsSuccess(queryIsSuccess);
}, [queryIsSuccess]);

// 自定义重置函数
const reset = () => {
  setIsSuccess(false);
  // 若需重置isLoading/isError，同理用本地状态包装对应字段
};

// 组件卸载时重置
useEffect(() => {
  return () => reset();
}, []);

// 依赖本地isSuccess执行逻辑
useEffect(()=>{
   switch(true){
      case isSuccess:
        setText('Transaction completed successfully!')
      break
      default:
        setText('Please Enter The client id')
   }
}, [isSuccess])

为什么useQuery没有内置reset？ #

RTK Query的useQuery是自动缓存管理的钩子，它的状态反映的是缓存数据的加载/就绪状态，而非单次请求的临时状态。而Mutation和useLazyQuery针对的是单次操作场景，因此提供了reset方法来清理单次操作的状态痕迹。

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