React Query의 캐시 라이프 사이클에 관한 내용

1.

Query Instances with and without cache data (캐시 데이터가 있거나 없는 쿼리 인스턴스):

A라는 queryKey를 가진 A 쿼리 인스턴스가 mount됩니다.
네트워크에서 데이터를 가져와서 불러온 데이터는 A라는 queryKey로 캐싱됩니다.

2.

Background Refetching (백그라운드 리패칭):

쿼리 데이터는 fresh 상태에서 staleTime(기본값 0) 이후에 stale 상태로 변경됩니다.

3.

Inactive Queries (비활성 쿼리):

A 쿼리 인스턴스가 unmount됩니다.

4.

Garbage Collection (가비지 컬렉션):

캐시는 gcTime(기본값 5분)만큼 유지되다가 가비지 컬렉터(GC)에 의해 수집됩니다.

5.

재마운트 시 동작:

만일 gcTime 지나기 전이고, A 쿼리 인스턴스가 fresh한 상태라면, 다시 마운트되었을 때 이전의 캐시 데이터를 보여줍니다.

주요 리턴 값

const {
data,
error,
status,
fetchStatus,
isLoading,
isFetching,
isError,
refetch,
// ...
} = useQuery({
queryKey: ["super-heroes"],
queryFn: getAllSuperHero,
});

isError: 쿼리 요청중에 에러가 발생한 경우 true
refetch: 쿼리를 수동으로 다시 가져오는 함수.

실패 일때 재요청

retry : 기본값은 3

const placeholderData = useMemo(() => generateFakeHeros(), []);

const {
  data,
  // ...
} = useQuery({
  queryKey: ["super-heroes"],
  queryFn: getAllSuperHero,
  placeholderData: placeholderData,
});

pending 상태인 동안 특정 쿼리에 대한 placeholder data로 사용된다.