reactjs 如何在react-query v4中使用useQueries钩子

k10s72fa  于 2023-06-29  发布在  React
关注(0)|答案(1)|浏览(119)

因此,我完全能够使用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文件中。我不想把我的放在互联网上)。
谢谢!

w41d8nur

w41d8nur1#

很抱歉没有早点回答这个问题。结果是我没有足够地阅读React Query文档。
大多数“无限抓取”行为是由refetchOnWindowFocus设置引起的,默认设置为true。此外,refetchOnMount和重试设置让我觉得它一直在抓取。
您可以关闭它们,如下所示:https://tanstack.com/query/v4/docs/react/guides/window-focus-refetching

相关问题