탠스택 쿼리

React

[React-Query] 리액트 쿼리 브라우저 복귀시 API 중복 요청 방지

문제 발생리액트 쿼리(React Query, TanStack Query)를 사용해서 데이터를 받아오는 API 중 브라우저 탭 외의 영역을 클릭 후 다시 크롬 브라우저 내부를 클릭 했을 때 API가 다시 요청되는 현상이 발생했다.  Background Refetching 사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터가 최신 상태인지 보장하기 위해서 브라우저가 암묵적으로 해당 캐시에 대한 데이터를 재요청하는 것을 의미한다.캐시를 사용하면서 매번 Background Refetching을 한뒤, 변경 사항이 있다면 UI를 변경한다. refetchOnWindowFocus 옵션true (기본값)falsealwaystrue사용자가 브라우저 탭을 떠났다가 다시 돌아왔을 때, 데이터를 최신 상태로 동기화하기..

캐럿노트
'탠스택 쿼리' 태그의 글 목록