Question

I have a component that uses useQuery to fetch and display a list of Cities.

<>Cities.js

 const { data, isInitialLoading, isError, refetch } = useQuery(
    ["cities"],
    () => axios.get("http://localhost/cities"),
    {
      staleTime: 10000, 
    }
  );

  // Display loading indicator
  if (isInitialLoading) {
   return <div>Loading...</div>;
  }

  return (
      // Display cities
      {data.map(city => {
         return <p> City: {city.name} </p>
      })}

     // Call refetch method once clicked
     <button onClick={() => refetch()}> call refetch</button>
  )

上面显示的<><>但<><>>>>>>> > > > > > > > > 一旦被点击,即应为<>refetch数据。我的问题是,当<代码>refetch时。这种方法如上所示,可人工称为react-query查询cache,然后回到。如果存在,或<代码>refetch>always向特定终点提出新的品牌要求? 我已经将<代码>staletime设定为10秒,因此,refetch将卡列结果退回10秒钟,然后在数据被考虑之后,再发出新的电话,以至<代码>? 如果没有,我可以采用哪些替代解决办法,以便在人工制作<代码>refetch时使用<代码>。感谢。

Answer 1

React Query的refetch方法确实在提出新的要求之前先检查切身。如果海滩上的数据仍被视为新数据(即在<编码> 定期<<>>>/代码>内),则React Query将立即退还附在册的数据,然后引发背景图,以更新服务器的最新数据。这样做是为了提供更平稳的用户经验,显示有线性的数据,同时确保快速更新数据,提供最新信息。

举例来说,在10秒钟的<代码>staletime上,电话refetch可在该时限内退还所附数据,并触发背景图,以更新各个海滩。 <代码>stale过期后,随后打电话到refetch时,仍可退还附卡的数据,同时启动新的电子要求,以更新背景的海滩。

If you want to ensure that manual refetches always make a new request without relying on the cache, you can use the force option when calling refetch. For example: JSX:- <button onClick={() => refetch({ force: true })}> call refetch</button>

<代码>:真实将绕过海滩,并总是向规定的终点提出新的要求。

或者,如果你想要在人工充电时更多地控制沥滤行为,那么你就可以根据您的申请要求,探索其他选择,如使用<编码>>可使用<<<<>>>>>>><<>条/代码>。

谢谢。

友情链接