fresh : 데이터의 신선도를 뜻한다. staleTime 옵션을 설정하지 않는다면 default가 0이기 때문에, 바로 더러운(stale) 데이터가 된다. staleTime 옵션이 설정되어 있으면, 만약 컴포넌트가 재 마운트 되더라도 요청이 가지 않고 fresh로 등록된 값이 리턴된다.
fetching : 데이터 요청이 수행되고 있는 쿼리이다.
stale : 이미 패칭이 완료가 되어 신선도가 떨어진 상태이다. ( 즉, 서버에 데이터와 간격이 벌어저 있을 수 있다 ). 재 마운트가 될 경우, 일단은 캐싱되어 있는 stale 데이터를 보이면서 곧바로 재요청을 통해 새로운 데이터를 받아오는 것을 시도한다.
inactive : 언마운트되는 컴포넌트의 쿼리들은 inactive가 된다. 이 상태에서는 cacheTime동안 해당 쿼리결과가 유지되었다가 타임이 넘어가면 쿼리데이터는 GC에 의해 수거된다.
데이터의 신선도를 유지하기 위한 재 요청이 이루어지는 타이밍은
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
{*/ ...Components */}
</QueryClientProvider>
)
}
데이터를 자식들에게 전파한다는 ContextAPI의 특성을 그대로 이어간다. 모든 컴포넌트는 useQuery를 이용하여 특정 쿼리들의 결과값을 조회할 수 있다. (key가 사용된다)
const { status, data, error, isFetching, isPreviousData } = useQuery(
['projects', page],
() => fetchProjects(page),
{ keepPreviousData: true, staleTime: 5000 }
)
// 예외처리 -> reject쓰지말고 무조건 throw Error
const { error } = useQuery(['todos', todoId], async () => {
if (somethingGoesWrong) {
throw new Error('Oh no!')
}
return data
})
refetchOnWindowFocus옵션은 staleTime과 함께 써서 특정 시간 내에서는 윈도우가 재 포커스가 되더라도 리패칭을 시도하지 않도록 하는것이 효율적이다.
옵션 중에 onSuccess, onError라는 프로퍼티가 존재하는데 여기에 함수를 설정하면 굳이 data의 유무에 따라 컴포넌트 내에 로직을 짜지 않고 옵션 내에서 로직이 짜지게 만들 수 있다. (매개변수는 data, error가 자동으로 붙어서 실행된다)
만약 두개 다 나누기 번거롭다면 onSettled라는 프로퍼티에 함수를 등록하면 된다
(매개변수는 onSettled ((data?: TData, error?: TError) => void) 형태이다)