gpt4 book ai didi

reactjs - 为什么我的 react-query 查询在卸载/挂载操作后重新获取?

转载 作者:行者123 更新时间:2023-12-05 01:32:29 26 4
gpt4 key购买 nike

设置

我有以下 react-query 钩子(Hook):

const STALE_TIME_MS = 12 * 60 * 60 * 1000; // 12h

const useUser = () => {
const services = useServices();
const { isLoading, error, data } = useQuery(
'user',
() => services.user.verify(),
{
staleTime: STALE_TIME_MS,
cacheTime: STALE_TIME_MS,
}
);
return {
isLoading,
error,
user: data,
};
};

然后,我有一个 App 组件,因为 child 住在 QueryClientProvider 中:

const App = () => {
const { isLoading } = useUser();

if (isLoading) {
return <Authenticating />;
}

return (
<HashRouter>
<Switch>
<Route path="/login" component={Login} />
<Route path="/" component={Dashboard} />
</Switch>
</HashRouter>
);
}

Login 组件检查用户是否已经登录并将其重定向回 /:

const Login = () => {
const { user } = useUser();

if (user) {
return <Redirect to="/" />;
}

...
}

Dashboard 组件做相反的事情:

const Dashboard = () => {
const { user } = useUser();

if (!user) {
return <Redirect to="/login" />;
}

...
};

问题

services.user.verify() 发出的请求失败时,react-query 会无限期地重试 user 查询。尽管 react-query 的默认重试次数是 3 次。

Infinite retry

问题似乎是因为我正在从正在安装/卸载的多个组件调用 useUser()。当我从 DashboardLogin 中删除重定向逻辑时,react-query 重试 3 次,然后按预期将我带到登录屏幕。

One call to useUser

有趣的是,user 查询被标记为过时的。如果我更改我的 services.user.verify() 实现以返回 null 而不是在用户未通过身份验证时抛出错误,查询将被标记为新鲜,我不会完全没有这个问题。

问题

  • react-query 是否在重试失败后总是认为查询过时?
  • 调用查询的新组件是否总是导致重试?
  • 是否有防止这种情况发生的选项?

最佳答案

Does react-query always consider queries stale when they fail even after the retries?

是的。 staleTime 仅在成功查询时启动,没有数据的查询(例如,因为失败)被认为是过时的。如果您的查询成功一次,然后在重新获取时失败,则它不会自动被视为过时 - staleTime 现在很重要,因为您已经有数据。

Does a new component calling the query always result in a retry?

当组件挂载时,react-query 会触发一次获取。这是由于标志 refetchOnMount,因此如果您不想这样做,可以自定义此标志。重试根据 retry 标志触发,是的,如果触发提取,则相应地触发重试。

Is there an option to prevent this from happening?The problem seems to come from the fact that I am calling useUser() from multiple components that are mounting/unmounting.

是的,这似乎是根本原因。您可以使用 refetchOnMount 选项解决此问题,或者,可能更好 - 不要重定向到调用 useUser 的路由(并期望用户在场),除非您已经拥有该用户的数据。例如,如果您的 useUser 处于错误状态,您可以安装 Login 组件,因为这意味着您未通过身份验证,并且只呈现 Dashboard如果你有一个用户。

关于reactjs - 为什么我的 react-query 查询在卸载/挂载操作后重新获取?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65463895/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com