RTK-Query条件查询遇错误后无法重请求的解决方案咨询

针对你遇到的问题，不用额外计数变量也能解决，以下是几种更优的方案：

方案一：直接使用refetch函数（推荐） #

RTK-Query的useXXXQuery钩子会返回refetch方法，调用它就能强制重新发起请求，完全不需要额外状态变量，也不会产生冗余缓存。

代码示例 #

// 解构出refetch方法
const { data, refetch, isError } = useUsersQuery(skipToken);

const getUsers = () => {
  // 直接调用refetch强制重新请求
  refetch();
}

// 按钮绑定点击事件
<button onClick={getUsers}>get users</button>

如果你的查询是带条件参数的（比如根据表单输入过滤），只需确保参数正确传递，refetch会自动使用当前参数重新请求：

const [filterParams, setFilterParams] = useState(null);
const { data, refetch } = useUsersQuery(filterParams ?? skipToken);

// 带参数的查询触发
const getUsers = () => {
  // 如果需要更新参数后请求
  const newParams = { status: 'active' };
  setFilterParams(newParams);
  // 或者基于当前参数重新请求
  refetch();
}

方案二：清除指定缓存条目 #

如果需要彻底清除错误状态的缓存，让后续请求自动重新拉取数据，可以通过RTK-Query的缓存工具函数实现：

1. 基于标签清除（推荐，需提前配置标签） #

先在API定义时给getUsers端点配置标签：

const usersApi = createApi({
  reducerPath: 'usersApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  tagTypes: ['Users'], // 定义标签类型
  endpoints: (builder) => ({
    getUsers: builder.query({
      query: (params) => `/users${params ? `?${new URLSearchParams(params)}` : ''}`,
      providesTags: ['Users'], // 关联标签
    }),
  }),
});

然后在组件中调用invalidateTags清除缓存：

import { useDispatch } from 'react-redux';
import { usersApi } from './path/to/your/api';

const dispatch = useDispatch();

const getUsers = () => {
  // 清除Users标签关联的所有缓存，触发重新请求
  dispatch(usersApi.util.invalidateTags(['Users']));
}

2. 清除特定参数的缓存 #

如果只想清除某一组参数对应的缓存，可以用invalidateCache指定端点和参数：

dispatch(usersApi.util.invalidateCache({
  endpoint: 'getUsers',
  args: skipToken // 对应你之前传递的参数值
}));

补充说明 #

你设置的refetchOnMountOrArgChange: true只会在组件挂载或查询参数变化时自动重新请求，但如果参数没有变化（比如一直用skipToken），即使之前请求出错，它也不会主动重新发起请求，所以需要用上述手动触发的方式。

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