React-Query(2)

캐시

로딩을 한 번만

받은 데이터를 캐시에 저장함

로딩을 안보여줘도 되니까 유저 경험적으로 좋다.

 

 

 

캐시가 있으면 API 호출을 하지 않는 것인가?

X

캐시가 있어도 진행한다.

로딩 대신에 캐시된 데이터를 미리 보여주는 것일 뿐이다.

뒤에서는 API 호출 작업을 한다.

그리고 API 호출이 완료되면 그때 캐시를 업데이트한다.

캐시는 새로운 데이터가 오면 계속 업데이트된다.

 

 

 

캐시 비워주기 gcTime

const { isLoading, data, isError, error } = useQuery({
        queryKey: ['posts'],
        queryFn: () => {
            return axios.get('http://localhost:3004/posts');
        },
        retry: 1,
        select: (data) => {
            return data.data;
        },
        gcTime: 5000, // 5초 뒤에 캐시 삭제
    });

 

gcTime 기본 값은 5분이다.