갑자기 disabled?

프리패칭을 하는 훅을 만들어서 사용하던 중 발생한 disabled...
데이터를 가져오지를 못하는 문제가 발생했다.

 

disabled에 대해서 tanstack에 찾아보니 state에 대한 내용과 함께 enabled 옵션을 다루고 있었다.

내가 해당 훅에서 사용한 코드는 아래와 같다.

  const [checking, setChecking] = React.useState<boolean>(false);
  
  useQuery(
    [queryKeys.TIMES, question.question_no],
    () => mainAPI.getTimes(question.question_no, user_no),
    {
      onSuccess: (res) => {
        setTimes(Number(res.data.times));
      },
      staleTime: 60 * 60 * 1000,
      enabled: checking,
    }
  );
  
  const setThisTimes = async () => {
    setChecking(true);
  };

의도는 명확했는데 구현에 있어서 방법이 잘못 되었던 것이었다.

훅이 끝나고 나서 checking 상태가 죽게 되었을 때 해당 쿼리는 결국 disabled 상태가 되는 것이었다.

useEffect 훅을 사용하여 리패칭하는 방법으로 변경한 후에 해당 훅이 제대로 작동하는 것을 확인할 수 있었다.

  React.useEffect(() => {
    refetch();
  }, [fetching]);