서버 상태 가져오기, 캐싱, 동기화 및 업데이트 해준다.
react는 데이터를 가져오거나 업데이트하는 방법을 제공하지 않는다.
기존 상태 관리 라이브러리(redux, recoil) 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업에는 적합하지 않습니다. 서버 상태가 완전히 다르기 때문
서버상태
서버 데이터를 가져오고 난뒤 문제
React Query를 사용하면
import { QueryClient, QueryClientProvider, useQuery } from 'react-query'
const queryClient = new QueryClient()
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
function Example() {
const { isLoading, error, data } = useQuery('repoData', () =>
fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res =>
res.json()
)
)
if (isLoading) return 'Loading...'
if (error) return 'An error has occurred: ' + error.message
return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>👀 {data.subscribers_count}</strong>{' '}
<strong>✨ {data.stargazers_count}</strong>{' '}
<strong>🍴 {data.forks_count}</strong>
</div>
)
}
useQuery나 useInfiniteQuery는 캐시된 데이터를 오래된 것으로 간주합니다.
staleTime은 캐시된 데이터가 신선한 시간.
오래된 쿼리는 다음과 같은 경우 백그라운드에서 자동으로 다시 가져옵니다.
refetchOnMount, refetchOnWindowFocus, refetchOnReconnect, refetchInterval
이 것 들이 위의 옵션
데이터를 가져오지 못하면 재시도 retry