[REACT QUERY] useQuery 의 refetch interval 기능

학습일 : 2023. 04. 12

---

useQuery의 세번째 argument로 refetch interval을 줄 수가 있다.


<Chart.tsx>

function Chart({ coinId }: ChartProps) {
  const { isLoading, data } = useQuery<IHistorical[]>(
    ["ohlcv", coinId],
    () => fetchCoinHistory(coinId),
    {
      refetchInterval: 10000, // 10000ms = 10초마다 refetch
    }
  );

<Coin.tsx>

  const { isLoading: tickersLoading, data: tickersData } = useQuery<PriceData>(
    ["tickers", coinId],
    () => fetchCoinTickers(coinId!),
    {
      refetchInterval: 5000, // 5000ms = 5초마다 refetch
    }
  );

이렇게 작성을 해주면 작성해준 시간마다 refetch가 된다.

즉 바뀐 값이 실시간으로 변경되는 것을 볼 수 있다.