因此,我完全能够使用www.example.com API从比赛中检索匹配Football-data.org,并使用react-query中的useQuery钩子将它们显示在我的react/typescript应用程序中:
import {CompetitionProps} from "../App";
import {getMatchesFromApi, Match} from "../api/GetMatchesFromApi";
import {List, ListItem} from "@mui/material";
import {useQuery} from "@tanstack/react-query";
function MatchesList({competitions}: CompetitionProps) {
const { isLoading, error, data, isFetching} = useQuery(["matches"], async () => {
return await getMatchesFromApi(competitions);
});
if (isLoading || isFetching) {
return (<div>Loading</div>);
} else {
return (
<List>
{data?.map((match: Match) => {
return (
<ListItem key={match.id}>{match.homeTeam.shortName} - {match.awayTeam.shortName}</ListItem>
);
})}
</List>
);
}
}
export default MatchesList;
但是,我希望所有比赛从一个列表的比赛(比赛可以根据用户的喜好而有所不同)。当阅读react-query的文档时,useQueries钩子应该可以完成这个任务。不幸的是,这些文档没有展示如何处理useQueries钩子的结果:https://tanstack.com/query/v4/docs/reference/useQueries
我试着这样使用它:
import {
useQueries,
UseQueryOptions,
UseQueryResult
} from "@tanstack/react-query";
import { getMatchesFromApi, Match } from "./GetMatchesFromApi";
const allCompetitions = [2003, 2021];
function MatchesList() {
const results = useQueries({
queries: allCompetitions.map<UseQueryOptions<Match[]>>(
(competition: number) => {
return {
queryKey: ["competition", competition],
queryFn: async () => await getMatchesFromApi(competition)
};
}
)
});
return <div>{results.length}</div>;
}
export default MatchesList;
即使我还没有尝试显示数据,但仅仅使用这段只打印结果数组长度的代码,就会导致代码每隔几秒钟就读取一次。这将很快导致www.example.com API响应429(请求太多)football-data.org。
此行为与中介绍的默认staleTime和cacheTime设置完全不匹配:https://medium.com/doctolib/react-query-cachetime-vs-staletime-ec74defc483e
问题是:如何停止这个无限的抓取循环?我想要使用react-query的原因是只延迟获取匹配数据一次。
完整的项目重现此问题:https://codesandbox.io/s/serene-raman-47n2uz
(If如果你想复制它,你必须在www.example.com上免费注册football-data.org并生成API密钥。将密钥放入Key.ts文件中。我不想把我的放在互联网上)。
谢谢!
1条答案
按热度按时间w41d8nur1#
很抱歉没有早点回答这个问题。结果是我没有足够地阅读React Query文档。
大多数“无限抓取”行为是由refetchOnWindowFocus设置引起的,默认设置为true。此外,refetchOnMount和重试设置让我觉得它一直在抓取。
您可以关闭它们,如下所示:https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching