React Query - useQuery

 

useQuery

useQuery로 요청한 API가 실패했다면 2번 더 보낸다. 모두 실패시 실패했다고 처리된다.

const { data, isError, error, isLoading} = useQuery("posts", fetchPost);

isError, isLoading 으로 요청에 대한 상태를 알 수 있다.

error은 요청에 대한 에러메시지를 나타낸다.

 

staleTime

데이터가 만료되기 전까지의 시간, 데이터 유효기간을 stale Time이라고 한다.

stale data는 만료된 데이터

React Query는 데이터 fetching을 도와주는 라이브러리이다.

다시 가져오는 refetch도 수행해주는데 트리거는 다음과 같다.

• 컴포넌트 리마운트
• 윈도우 포커싱

예를들어 어떤 게시판을 키고서 요리를 하러 갔다. 20분 뒤에 돌아왔는데 게시글의 상태가 바뀌지 않아서 "다 봤던거네" 하고 꺼버릴 수 있다. 윈도우가 포커싱 되었음에도 오래된 데이터가 유지되어 새로운 게시글을 노출시켜줄 수 없는 것이다.

stale time을 지정해둔다면, 윈도우 포커싱을 했을 때 새로운 데이터를 불러와 사용자에게 신선한 게시글(?)을 제공해줄 수 있다.

사용법은 options을 추가해주는 것이다.

const { data } = useQuery("posts", fetchPosts, { staleTime: 2000, // default 0ms
});

2초간 데이터가 유효하며 2초이후로 위의 트리거가 발동되면 새로운 데이터를 가져온다는 것이다.

staleTime은 default로 0ms인데 위 트리거가 발동될 때마다 가져올 것 같은데, 서버에 부담이 갈 수 있으니 이를 적절히 지정해두는 것도 염두에 두어야할 것 같다.

 

cacheTime

staleTime은 re fetching을 위한 것이다.

cache는 나중에 다시 필요할 수 있는 데이터로 둘의 성격이 다르다.

 

특정 useQuery가 사용되지 않는다면 해당하는 데이터는 "콜드 스토리지"로 이동된다.

설정한 cacheTime(기본 5분)이 지나면 캐시데이터가 만료된다.

cacheTime은 특정 useQuery가 실행된 후 경과된 시간이다.

posts데이터를 불러오는 useQuery를 호출한 다음, 다른 페이지로가서 5분이상 저 쿼리를 호출하지 않는다면 캐시데이터가 만료된다는 것이다.

캐시만료시 데이터가 가비지 컬렉티드되어 데이터를 사용할 수 없게된다.

데이터가 캐시에 있는 동안에 fetching에 활용될 수 있다.

다시말해 데이터를 불러오기 전 빈 화면을 보여주는 것 보다 이전에 불러왔던 캐시데이터를 보여주는게 좋다는 의미이다.

하지만 이를 하고싶지 않다면 cacheTime을 0으로 설정하면 된다.