문제

상황은 이렇습니다. useQuery()를 쓸 때 선언적인 성격 때문에 고민될 때가 있었습니다.

예를 들어, 마운트 시에는 데이터가 패치되지 않고 버튼을 클릭했을 때 데이터를 패치 받아서 데이터에 따라 react-router-dom 의 history.push 해야하는 상황을 가정해보겠습니다.

이때

1. *enabled 을 false로 두고 이벤트 핸들러에서 refetch() 로 메뉴얼하게 패치하는 방법*
2. *enabled 옵션에 해당하는 상태를 useState 로 컴포넌트내에 두고, 이벤트 핸들러에서 해당 값을 변경하여 enabled를 조건부로 만족시켜 패치시키는 방법*

을 고려해보았습니다. 다소 복잡하다고 느껴질 수 있지만 github discussion을 살펴보니 react query 제작자들은 선언적이라는 이유로 2번을 권장하는 것으로 보입니다. (다만 찔러야할 API가 많을 때, 관리할 state가 너무 많아집니다.)

결론(주관)

case by case 이지만 보통 1번의 방법을 사용한다면 간단하고, api 요청이 별로 없을 경우에 사용할 것 같습니다. 하지만 처리 과정이 디테일 하거나, 여러 api 요청이 있을 경우 2번 방법을 사용할 것 같습니다.

방법1

방법2