(코인거래소나 실시간sns같은 실시간 데이터를 계속 가져와야 하는 사이트들이 쓰면 좋음)
npm install react-query 설치
(index.js)
import {QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient()<QueryClientProvider client={queryClient}> ~~~ </QueryClientProvider>
useQuery('작명', ()=>{ return axios.get('https://~~').then((a)=>{ return a.data }) })
1. 성공/실패/로딩 중 쉽게 파악가능
let result = useQuery('작명', ()=>{
return axios.get('https://~~').then((a)=>{
return a.data
})
})
// result.data - axios 요청이 성공했을때 가져오는 데이터 들어있음
// result.isLoading - axios 요청이 로딩중일때 true 값이 됨
// result.error - axios 요청이 실패했을 때 true 값이 됨
{result.isLoading && '로딩중'}
//로딩중일때 '로딩중'띄워줘
2. 틈만나면 자동으로 재요청해줌
다른 탭으로 들어갔다와도 자동으로 refetch 해줌
실시간으로 신선한 데이터들을 보여줘야하는 사이트도 걱정하지 않아도됨! good!
간격 설정도 가능
let result = useQuery('작명', ()=>{
return axios.get('https://~~').then((a)=>{
return a.data
}),
{staleTime : 2000}
//2초 안에는 refetch 안되게 설정할 수 있음
//refetch를 끌 수 도있음
})