RTK Query中实现手动重试按钮并避免无限重取的最佳实践咨询

你遇到的这个无限重取循环问题其实挺典型的，我来给你梳理下RTK Query里处理手动重试的最佳实践，顺便聊聊你用{ skip: true }的方式到底是不是最优解~

首先得说清楚为什么会出现无限循环：你原来在错误组件里调用useGetUsersQuery时，如果不加skip: true，这个hook会在组件挂载时自动触发请求；而请求失败后组件重新渲染，又会触发hook的自动请求，如此往复就形成了死循环。你加skip: true的方式确实能解决问题，而且这也是官方认可的一种方案，但其实还有更地道、更简洁的实现方式。

更推荐的实现方式：传递主组件的refetch函数给错误组件 #

RTK Query的useGetUsersQuery hook本身就会返回refetch方法，这个方法就是专门用来手动触发请求重试的。我们可以直接在主组件里拿到这个方法，然后通过props传递给错误组件，这样错误组件根本不需要再调用useGetUsersQuery，自然也不会有循环的问题。

修改后的代码示例：

function MyComponent() {
  // 从主查询hook中直接拿到refetch函数
  const { data, isLoading, isError, isSuccess, refetch } = useGetUsersQuery();

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (isError) {
    // 把refetch作为props传给错误组件
    return <IsError onRetry={refetch} />;
  }
  if (!isSuccess) {
    return <> </>;
  }
  return (
    <>
      {/* ...你的业务逻辑代码 */}
    </>
  );
}

// 错误组件只负责接收重试回调，不需要依赖RTK Query的hook
function IsError({ onRetry }) {
  return <Button onClick={onRetry}>Retry</Button>;
}

为什么这种方式更好？ #

• 更符合RTK Query的设计思路：refetch方法就是官方为手动触发请求提供的API，直接使用它更贴合工具的设计意图。
• 组件解耦：错误组件不需要和RTK Query的查询hook绑定，只需要接收一个重试回调，职责更单一，也更容易复用。
• 代码更简洁：避免了在错误组件中重复调用useGetUsersQuery并配置skip: true的冗余代码。

如果你的错误组件需要展示具体的错误信息，也可以把主组件中拿到的error对象一起传递过去：

// 主组件中
if (isError) {
  return <IsError error={error} onRetry={refetch} />;
}

// 错误组件
function IsError({ error, onRetry }) {
  return (
    <div className="error-container">
      <p>请求失败了：{error.data?.message || '发生未知错误'}</p>
      <Button onClick={onRetry}>点击重试</Button>
    </div>
  );
}

回到你的问题：{ skip: true }是不是推荐方式？ #

它确实是一种可行的方案，但相比传递refetch的方式，耦合度更高，代码也更繁琐。所以更推荐上面这种传递refetch的实现方式，这才是RTK Query中处理手动重试更地道的做法。

内容来源于stack exchange