원하는 시점에 useQuery를 사용해보자

기본적으로 useQuery는 선언적으로 동작합니다.

 

예를 들어 useQuery(['getPhoneNumberByUserId', {userId}], queryFn) 와 같은 쿼리가 있습니다.

위 쿼리는 userId가 변경되면 "알아서 " queryFn을 실행합니다.

 

 

문제

• 하지만 원하는 시점에 queryFn을 실행하고 싶은 경우가 종종 있습니다.
  • 복잡한 form을 다루다보면 이런 선언적인 방식이 오히려 코드의 가독성을 해치는 경우도 있습니다.
• 또한 위의 코드에서는 userId가 같다면 queryFn을 호출하지 않습니다.
  • 하지만 userId가 같더라도 항상 queryFn을 호출하고 싶은 경우가 있습니다.

 

해결 방법

• queryClient.fetchQuery를 활용해볼 수 있습니다.
• 이미 useQuery로 인해 staleTime이 존재하거나, cacheTime이 존재하더라도 반드시 fetch를 진행합니다.
• 해당 메서드는 fetch 후 기존의 useQuery에 정의된 option들이 그대로 적용됩니다.

 

개인적인 생각

fetchQuery에는 queryFn과 option들도 넣을 수 있지만 queryKey만을 넣는것이 좋은것 같습니다.

회사에서 useQuery를 사용할때 hook으로 래핑해서 customQuery를 사용하는데 해당 query의 option들이  fetchQuery에서 달라진다면 같은 queryFn의 cacheTime등이 어디서 바뀌었는지 추적이 어려운것 같습니다.

따라서 fetchQuery({queryKey}) 형태로 사용하는것이 사용할때도 간단하고 유지보수할 때도 좋은것 같습니다.