Настраивать
У меня есть следующий react-query
хук:
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
, поскольку ребенок живет внутри 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.
Проблема, похоже, возникает из-за того, что я вызываю useUser()
из нескольких компонентов, которые монтируются / размонтируются. Когда я удаляю логику перенаправления из Dashboard
и Login
, react-query
выполняет 3 попытки, а затем переводит меня на экран входа в систему, как и ожидалось.
Интересен тот факт, что запрос user
помечен как устаревший. Если я изменю свою реализацию services.user.verify()
, чтобы она возвращала null
вместо выдачи ошибки, когда пользователь не аутентифицирован, запрос помечается как свежий, и у меня вообще нет этой проблемы.
Вопросов
react-query
Всегда считает запросы устаревшими, если они не работают даже после повторных попыток?- Приводит ли новый компонент, вызывающий запрос, всегда к повторной попытке?
- Есть ли способ предотвратить это?