TanStack-Query
queryKey
TanStack Query의 queryKey 관리 방식이 인라인 배열, 상수 객체, query key factory를 거쳐 v5 queryOptions까지 어떻게 진화했는지 정리한다. 작성 규칙과 DataTag 타입 추론, 무효화 패턴을 실무 관점으로 다룬다.
queryKey 비교 원리
TanStack Query가 렌더링마다 새로 만들어지는 queryKey 배열을 같은 키로 판단하는 방식을 정리한다. hashKey 직렬화가 키 순서, undefined, Map 같은 값을 어떻게 바꾸는지와 필터가 키 구조를 비교하는 방식까지 다룬다.
ErrorBoundary 배치
React Router 와 TanStack Query 를 쓰는 화면에서 ErrorBoundary 를 몇 개, 어디에 둘지 정하는 기준을 설치본 소스로 확인한다. 라우트, 화면, 영역마다 받는 에러와 되돌리는 방법, fallback 을 하나로 맞추는 법, 재시도 조건까지 다룬다.
재시도 버튼이 안 듣는 이유
react-error-boundary 의 재시도 버튼을 눌러도 같은 fallback 이 다시 뜨는 세 경우를 설치본 소스로 확인한다. 쿼리 에러는 QueryErrorResetBoundary, 렌더 에러는 queryFn 검사, React.lazy 청크 실패는 새로 고침으로 푼다.
에러 전이
같은 에러를 일곱 자리에서 던져 보면 넷만 ErrorBoundary 에 닿는다. 렌더와 생명주기, 컴파일 타임, 서버 데이터, 페이지 전환, 외부 라이브러리, 이벤트와 비동기가 각각 어디로 전이되는지를 공식 문서와 설치본 소스로 확인한다.