목록으로
웹 · 캐시

교차 도메인 캐시 정합성 (TanStack Query)

화면을 오갈 때 옛 데이터가 그대로 남아 어긋나던 문제를, 도메인 간 캐시 갱신 규칙을 세워 해결.

회원 변경mutation회원 활동회원 그룹관리자포인트교차 무효화query-key 팩토리로 "이 데이터를 바꾸면 어떤 화면이 영향받는지"를 구조로 명시
01

상황

회원 목록을 본 뒤 커뮤니티 멤버 화면으로 이동하면 이전 데이터가 그대로 보이는 등, 같은 대상을 다루는 도메인 API끼리 화면이 어긋났습니다.

02

원인 분석

도메인별로 캐시 키가 분리돼 있어, 단순 invalidateQueries만으로는 무효화 시점과 상대 도메인의 조회 시점이 어긋나 갱신이 누락됐습니다. 도메인 간 의존 관계가 코드에 드러나 있지 않아 어디를 무효화해야 하는지도 흩어져 있었습니다.

03

해결

데이터를 조회하는 시점에 연관 도메인의 캐시를 함께 무효화하는 양방향 패턴을 만들고, 어떤 도메인이 어디에 의존하는지가 query-key 팩토리의 import 관계로 코드에 드러나게 했습니다. 이 데이터를 바꾸면 어떤 화면이 영향받는지가 코드 구조에 드러나게 하고, 회원↔커뮤니티↔그룹에 같은 패턴을 적용했습니다.

04

결과 · 배운 점

화면 간 데이터가 어긋나 보이는 상황이 정리됐고, 이후 도메인이 늘어도 같은 규칙으로 무효화 관계를 확장할 수 있게 됐습니다. 이후로는 서버 상태를 쿼리 하나하나가 아니라 도메인 간 관계로 놓고 설계합니다.