3월 26일 TIL : ReactQuery 시작하기

react query

ajax성공/실패시 보여주는 html별도로 지정하거나,
몇 초마다 자동으로 ajax요청해야할 일이 있거나,
실패시 몇 초 후 요청 재시도해야 할 때
등 실시간 데이터가 중요할 때 쓰임!

 

1. install

yarn add @react-query

npm install @react-query

 

2. index.js 설정

//index.js	
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();
...
<QueryClientProvider client={queryClient}>
...
</QueryClientProvider>

이용할 컴포넌트에서 

 

 

useQuery("이름", () => {
	return axios.get("https://codingapple1.github.io/userdata.json").then((a) => {
		return a.data;
	});
});

//return을 두개써야하는데 귀찮으면 중괄호와 함께 생략

useQuery("이름", () => axios.get("https://codingapple1.github.io/userdata.json").then((a) => a.data));

 

useQuery의 첫 번째 인자에는 unique key가 들어간다.
이 키는 내부적으로 refetching, caching, query 공유를 위해 사용된다.

api 요청으로 얻은 데이터를 구분할 수 있는 key를 부여해서
또다시 같은 데이터를 요청하지 않도록 할 수 있다.
useQuery의 key가 달라지면 곧바로 다시 api 요청을 한다.

두 번째 인자에는 data를 resolve 하거나 error를 뱉는 Promise를 리턴하는 함수를 넣는다.
이 함수 안에서 에러가 발생하면 자동으로 error를 reject 해준다.
axios는 200이 아닌 응답에 에러가 발생하기 때문에 별다른 처리를 해주지 않아도 되지만
fetch를 쓸 경우에는 일일이 throw new Error()를 해줘야 한다.

 

 

react Query를 이용하는 이유

1. ajax요청성공,실패,로딩중 상태를 파악하기 쉬움.  

2. 자동으로 refetch해줌-그래서 실시간sns같은곳에서 많이 쓰임. 

 

페이지 체류하고나서 일정시간이 경과하거나
다른 창으로 갔다가 다시 페이지로 돌아오거나 
다시 메인페이지로 돌아가거나 
이런 여러 경우에 알아서 ajax 요청을 다시 해줍니다.

refetch되는 조건:

1. 새로운 query instance가 마운트 될 때 ( page를 이동 했다가 왔을 때 의미)

2. 브라우저 화면을 이탈 했다가 다시 focus 할 때

3. 네트워크가 다시 연결될 때

4. 특별히 설정한 refetch interval에 의한 경우 (refetchInterval)

 

refetchOnWindowFocus 옵션 등으로 기본 refetch 설정을 막을 수 있고
staleTime 옵션으로 설정한 시간 동안 데이터가 stale 되지 않도록 해 refetch를 막을 수도 있다.

또한 query에 별다른 action이 없으면 inactive 상태로 캐시에 남아 있다가 5분 뒤에 메모리에서 사라진다.
cacheTime 옵션을 설정해서 이 시간을 조정할 수 있다.

const result = useQuery(
	"이름",	
	() =>axios
    	.get("https://codingapple1.github.io/userdata.json")
        .then((a) => {
			console.log("requested");
			return a.data;
		}),
	{ staleTime: 2000 }
);

 

위 코드 staleTime처럼 요청타이머도 설정 가능하다. 

 

리액트 쿼리에 아무 설정을 하지 않으면 캐싱이 되지 않는다.

캐싱을 제대로 쓰려면 staleTime과 cacheTime에 대해 알아야 한다.

두 값은 options에 넣을 수 있다.

 

const { data } = useQuery('users', getUsers, { // options
  staleTime: 5000,
  cacheTime: Infinity,
});

staleTime으로 설정한 시간만큼 api 요청한 데이터의 신선도가 유지되고

이 시간이 지나면 fresh한 상태에서 stale한 상태 곧 썩기 때문에 

같은 데이터를 다시 필요로 할 때 api 요청을 다시 할 수밖에 없다.

 

그러나 아무리 staleTime을 길게 줬다해도

저장되는 시간인 cacheTime이 짧다면

데이터가 사라지기 때문에 다시 요청을 해야 한다.

 

staleTime의 기본값은 0이고 cacheTime은 5분이다.

때문에 아무 option을 주지 않으면 캐싱이 되지 않는다.

데이터는 캐싱되지만 신선한 데이터가 하나도 없는 것이기 때문이다.

3. 요청 실패시 retry를 4번 해줌. 

4. state공유(props전송)할 필요 없음. (react-query는 ajax 요청이 2개나 있으면 1개만 날려주고 캐싱기능이 있기 때문에 이미 같은 ajax 요청을 한 적이 있으면 그걸 우선 가져와서 씁니다.)
똑같은 경로로 ajax요청?-> 5분(cacheTime지정 안하면 디폴트값 5분) 전 요청했던 기존 성공 결과를 가져다 보여주고나서 get요청을 시작해서 더 빠른 효과.