이번에 티켓팅 서비스 개발에 참여하면서 ErrorBoundary를 사용해서 선언적으로 에러와 데이터를 관리하고 있습니다. 그 과정에서 동적 쿼리 키를 사용하는 useQuery의 ErrorBoundary를 해제하는 과정에서 마주친 문제를 기록하려고 합니다.
아래 사진은 대학교를 선택한 후 사용자가 마주하는 축제 정보 확인 페이지입니다.
선택한 대학의 아이디와 이름이 url의 쿼리 스트링으로 전달됩니다.
/home?id=대학아이디&select-univ=대학명
전달받은 쿼리 스트링(대학 아이디)으로 대학에서 진행중인 축제 정보를 useQuery로 가져옵니다. 또한, Selector를 통해 대학을 선택하면 쿼리 스트링이 해당 대학의 아이디와 이름으로 변경되어 useQuery를 재호출합니다.
다음은 페이지 코드의 일부입니다.
RetryErrorBoundary는 useQuery에서 발생한 오류를 포착하고 이를 재설정하여 데이터를 다시 가져올 수 있게 해주는 ErrorBoundary 입니다.
500 Error가 아닌 에러의 경우 아래와 같은 페이지를 렌더링합니다.
일시적인 네트워크 오류로 인해서 데이터를 불러오지 못하는 경우에는 다시시도 버튼을 통해 오류를 재설정하여 데이터를 다시 불러올 수 있습니다. 하지만 제가 고려한 부분은 일시적인 네트워크 오류가 아닌 의도적으로 url을 변경하여 데이터를 가져오지 못하는 경우였습니다.
이상적이고 제가 지향했던 해결 방향은, 다른 대학을 선택할 시 에러가 재설정되면서 선택한 대학의 정보를 토대로 useQuery가 호출되어 다시 렌더링을 진행하는 것이었습니다.
(다시시도 버튼은 일시적인 네트워크 오류를 재설정하는 버튼이고 쿼리 스트링을 변경하는 로직이 없기 때문에 해결법은 아닙니다.)
하지만 올바르게 동작하지 않았고, 원인은 아래와 같습니다.
React Query는 에러가 발생하면 그 에러를 내부 상태로 관리하고 해당 쿼리를 자동으로 재시도하지 않는다. 만약 Selector 컴포넌트에서 `id`를 변경해도, 이전 쿼리에서 발생한 에러 상태 때문에 새로운 쿼리가 실행되지 않을 수 있다.
즉, 동적 queryKey로 사용하는 id에 대한 에러가 재설정되지 않았기 때문에, id를 변경해도 쿼리가 실행되지 않아서 그렇습니다.
그렇다면, 외부에서 queryKey를 받아오는 useQuery의 경우 에러를 어떻게 재설정해야할까요?
ErrorBoundary의 resetKeys를 사용하면 됩니다.
resetKeys는 useQuery의 queryKey와 비슷한 맥락으로 이해하면 됩니다.
특정 useQuery로 인해 발생한 오류가 있다면, 해당 useQuery가 사용하는 동적 쿼리 키를 resetKeys에 의존성 배열처럼 전달하면 됩니다.
이제 ErrorBoundary의 resetKeys에 전달된 쿼리 키들의 값이 변한다면, 해당 쿼리 키를 사용하는 useQuery는 재호출되어 정상적으로 데이터를 다시 불러올 수 있게됩니다. 여기서는 resetKeys={[id]} 가 되겠습니다.
