React-query

• ajax 성공 시 / 실패 시 html 보여주려면 ?
• 몇초마다 자동으로 ajax 요청 ?
• 실패 시 몇초 후 요청 재시도 ?
• prefetch ?
  => 쉽게 구현가능한 React - Query !!! 야호 ٩( ᐛ )و 배워보자

(코인거래소나 실시간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를 끌 수 도있음
})