TanStack Query는 어떻게 queryKey를 비교할까?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

TanStack Query 사용자, React 및 쿼리 관리에 관심 있는 개발자

핵심 요약

• queryKey는 hashKey 함수를 통해 JSON 직렬화 및 정규화 과정을 거쳐 문자열로 변환
• 객체 내 키 순서는 정렬되어 처리되며, undefined 값은 제거됨
• JSON.stringify의 replacer 함수를 통해 일관된 키 비교를 구현

섹션별 세부 요약

1. `QueryClient` 및 `QueryCache` 구조

• QueryClientProvider를 통해 QueryClient 인스턴스 생성
• QueryCache 내부에서 Map 형태로 쿼리 저장
• useQuery 호출 시 QueryCache.build() 메서드가 실행됨

2. `hashKey` 함수의 직렬화 로직

• JSON.stringify의 replacer 함수로 queryKey 정규화
• isPlainObject 검사를 통해 객체 내 키 정렬
• 예: { b: 2, c: undefined, a: 1 } → { a: 1, b: 2 }
• undefined 값은 직렬화 과정에서 자동 제거

3. `queryKey` 비교 예시

• 두 queryKey가 객체 키 순서나 undefined 포함 여부가 다를 경우도
• 예: ['hello', { a: 1, b: 2 }] vs ['hello', { b: 2, c: undefined, a: 1 }]
• hashKey 함수를 통해 동일한 문자열로 직렬화되어 동일한 쿼리로 인식

결론

• queryKey의 일관성을 유지하기 위해 hashKey 함수 사용 필수
• 객체 키 정렬 및 undefined 제거 로직을 구현해 쿼리 중복 방지
• JSON.stringify의 replacer 함수를 통해 키 비교 정확성 확보