React Query

React Query의 InvalidateQueries가 동작하지 않을 때

문제상황 생성 API를 호출한 뒤 성공한 경우 invalidateQueries 를 통해 기존에 조회했던 쿼리를 무효화시키고 데이터를 새로 조회해오고자 했다. React Query DevTools를 통해 쿼리 조회 결과를 살펴보면 다음과 같다. 맨 처음에 ["PRODUCTS",false] 쿼리를 먼저 조회하였다. 해당 컴포넌트가 unmount 되면서 해당 쿼리 결과는 inactive 상태가 되었다. 이후 ["PRODUCTS",true] 쿼리를 조회하여 현재 fresh 상태의 쿼리 결과를 가지고 있다. 이후 Product 리스트에 새 상품을 추가하면서 해당 쿼리 결과를 업데이트 시킬 필요가 있었고, 아래 두 가지의 방법 중 후자의 방법으로 업데이트를 처리하고자 했다. 1️⃣ 낙관적 업데이트 처리 2️⃣ 쿼리..