📌 setQueryData가 데이터를 fresh로 만드는 이유
💡 1️⃣ React Query의 기본 원칙
"캐시에 있는 데이터는 신뢰할 수 있는 최신 데이터여야 한다."
setQueryData를 호출했다는 것은, 개발자가 의도적으로 최신 데이터라고 간주하는 데이터를 캐시에 직접 넣었다는 의미입니다.- React Query는 "개발자가 직접 넣은 데이터니까 최신 데이터다!"라고 판단하고, 해당 쿼리를 fresh 상태로 변경합니다.
💡 2️⃣ fresh와 stale의 의미
| 상태 | 의미 |
|---|
| fresh | 현재 캐시 데이터가 신뢰할 수 있다 (별도 fetch 필요 없음) |
| stale | 데이터가 오래되어 신뢰할 수 없음 (다음 기회에 반드시 refetch 필요) |
setQueryData → 개발자가 최신 데이터라고 직접 주입- React Query → "이건 믿을만한 최신 데이터니까 fresh 처리!"
💡 3️⃣ setQueryData는 주로 낙관적 업데이트용
- 보통 서버 요청 전에 UI를 먼저 업데이트할 때
setQueryData를 사용합니다.
- 즉, 개발자가 "이 정도면 서버랑 맞을 거야"라고 판단하고 업데이트하는 흐름.
- React Query는 "개발자가 최신 데이터라고 보장했으니, fresh로 간주해도 되겠지"라고 해석합니다.
💡 4️⃣ staleTime보다 setQueryData가 우선
- 기존 쿼리의
staleTime 설정과 관계없이
setQueryData를 하면 → 즉시 fresh 처리staleTime은 그 시점부터 다시 카운트
⚠️ 개발자 보증 데이터 = fresh 철학의 함정
setQueryData로 넣은 데이터가 실제로 최신이 아닐 수도 있음- 여러 화면에서 데이터 공유 시, 다른 화면이
setQueryData로 변경한 데이터를 "fresh니까 믿을만해"라고 오판할 가능성
- 이런 문제를 방지하려면,
invalidateQueries로 명확히 stale 처리하는 것이 안전
📊 요점 정리
| 동작 | 결과 |
|---|
| 서버에서 가져온 데이터로 업데이트 | fresh (기본 동작) |
setQueryData로 업데이트 | fresh (개발자가 보장한 최신 데이터로 간주) |
invalidateQueries 호출 | stale (다음에 반드시 refetch) |
staleTime 설정 있음 | 해당 시간 동안은 무조건 fresh 유지 |
📢 정리
| 행동 | React Query의 해석 |
|---|
| 서버에서 데이터를 가져옴 | fresh |
setQueryData로 데이터 수정 | fresh |
invalidateQueries 호출 | stale |
staleTime이 지나감 | stale |
✅ 결론
setQueryData = 개발자가 "이거 믿을 수 있어!" 하고 직접 넣은 데이터
React Query = "개발자가 넣었으니까 최신 데이터로 간주하고 fresh 처리"
📚 참고 문서