refetchInterval을 사용해서 특정 조건 달성 시 useQuery를 멈추는 방법

Question

react-query useQuery 관련 질문이 있습니다. 특정 조건에 걸릴때까지 주기적으로 요청을 해야하는데, refetchInterval을 어떻게 사용해야할지 잘모르겠습니다. 혹시 아시는분 계실까요?

hvp · Answer

refetchInterval 값을 관리하는 state를 하나 만드는게 가장 적절해 보입니다.

혹은 버전에 따라 다르겠지만 단순히 bookingStatus(fetch해온 데이터)와 관련있는 조건이라면 바로 function을 넣어줄 수도 있을 것 같습니다.

https://stackoverflow.com/questions/66263924/how-can-i-stop-a-react-query-usequery-running-on-a-refetchinterval-when-a-condit

강동희 · Answer

useQuery 에 매개변수로 넣어주는 options 객체의 enabled 와 refetchInterval 을 사용하시면 될 것 같습니다.
query 는 enabled 가 true 인 상황일 때 실행이 됩니다.
refetchInterval 로 주기적으로 패칭할 타임을 걸어주고, enabled 를 활용해 특정 상황에 콜을 멈추면 될 것 같습니다.
아래 예제 코드는 state 를 활용해 enabled 상태를 관리하고, timeout 되는 시점에 enabled 를 false 로 바꿔주어 콜을 그만하게 하는 예제입니다.

const [enabled, setEnabled] = useState(true);
  const { data, isLoading } = useQuery<IList[], Error>(KEY_LIST, getList, {
    refetchInterval: 500,
    enabled,
  });

useEffect(() => {
    const timeout = setTimeout(() => {
      setEnabled((prev) => !prev);
    }, 5000);
    return () => clearTimeout(timeout);
  }, []);