useQuery(staleTime, refetchOnMount, refetchOnWindowFocus)

staleTime

• stale time: 서버 데이터가 자주 변경되지 않거나 유저에게 완전 최신 데이터가 표시되지 않아도 되는 경우 매번 페이지 접속때마다 백그라운드에 refetch을 할 필요 없이 캐싱된 데이터를 사용할 수 있다. (기본 시간 0초)

.
.
.
export const RQSuperHeroesPage = () => {
  const { isLoading, isError, error, isFetching, data } = useQuery({
    queryKey: ["super-heroes"],
    queryFn: featchSuperHeroes,
    // 만약 30초 동안 오래된(stale) 데이터를 봐도 괜찮을 경우 
    staleTime: 30000,
  });
.
.
.

---

refetch 관련 두가지 구성

refetchOnMount

• true 로 설정하면, 데이터가 오래된 경우(staleTime 기준) 쿼리는 마운트 시 재조회(기본값은 true)

• false로 설정하면, 마운트 시 쿼리가 재조회되지 않는다.

• "always"로 설정하면, 쿼리는 항상 마운트 시 재조회

.
.
.
export const RQSuperHeroesPage = () => {
  const { isLoading, isError, error, isFetching, data } = useQuery({
    queryKey: ["super-heroes"],
    queryFn: featchSuperHeroes,
    staleTime: 5000,
    refetchOnMount: true,
  });
.
.
.

refetchOnWindowFocus

• 브라우터 창에 focus할때 refetch(다른 탭 눌렀다가 눌렀을 때)

• refetchOnMount보다 약간 더 중요함.

• 서버 데이터가 변경되면 브라우저 탭 화면에 전통적인 axios를 사용할때는 그 전 데이터가 그대로이고 새로고침 시 업데이트 되지만, react-query를 사용하면 새로고침을 하지않아도 원격으로 데이터와 동기화된다.

• 기본적으로 windowFocus에 대한 구성(Configuration)을 다시 가져오기 때문에 가능하다.

• 유저가 다른 어플리케이션에서 우리 어플리케이션으로 돌아올 때 원격 데이터로 UI를 최신 상태로 유지할 때 유용하다.

• true로 설정하면, 쿼리가 오래된(stale) 상태인 경우에만 윈도우 포커스 시 refetch

• false로 설정하면, 쿼리가 윈도우 포커스 시 재조회되지 않습니다.

• "always"로 설정하면, 쿼리는 항상 윈도우 포커스 시 refetch

.
.
.
  const { isLoading, isError, error, isFetching, data } = useQuery({
    queryKey: ["super-heroes"],
    queryFn: featchSuperHeroes,
    refetchOnWindowFocus: true,
  });
.
.
.

---

https://www.youtube.com/playlist?list=PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2