기존 useEffect와 fetch문이 API 호출이 너무 많은 관계로, 쿼리 키를 캐싱해 stale의 유무에 따라 api를 호출해주는 react-query를 도입했다.
useEffect 대체
첫 컴포넌트 로드시 실행하는 빈 의존성 배열을 넣은 useEffect(()=>{},[])를 대체하는 것은 쉬웠다.
->
코드 복붙보다는 직접 치는걸 좋아해서 사진으로 올린다 ㅎㅎ
이벤트를 통한 데이터 패칭
근데 문제가 생겼다.
클릭 또는 엔터를 통해서 데이터를 Get 하는 컴포넌트가 있는데, useQuery는 컴포넌트 로드시 정해진 함수를 실행하기 때문에, 컴포넌트 실행시 자동으로 받아와졌다.
그래서 React-query에서는 이러한 상황을 막기 위해 Enabled라는 옵션을 제공한다.
사용은 아래와 같다.
const {data,isLoading,isError}=useQuery({
queryKey:['blabla'],
queryFn:()=>func(),
enabled:false, // 이러면 자동으로 실행하지 않음!
})enabled를 false로 두면 자동으로 실행되지 않는다는 뜻이다. 완전 나한테 찰떡쿵야잖아
그럼 이 친구를 어떻게 실행하면 좋을까?
refetch라는 친구도 지원한다, 이 친구는 옵션이 아닌 반환하는 함수다.
const {data, isLoading, isError, refetch}=useQuery({...})refetch를 불러오면, query를 다시 fetching 해준다.
조건은 해당 query가 stale 상태여야한다. 주목하자 stale
그래서 나는 아래와 같이 사용했다.
<button onClick={()=>refetch()}> Search </button>문제가 생겼다. 버튼을 두 번 눌러야 api가 호출되는 것이었다. 심지어 1초 제한 걸어둔 stale으로도 바뀌지가 않는다. 이유가 무엇일까?
난 진짜 몰랐다, 많은 사람들이 저렇게 쓰라고 포스팅했었다...
enable=false로 선언된 useQuery는 stale 상태가 아닌, inactivate 상태이다.
상한게 아니라, 아직 실행이 안된 것이다. 그래서 fresh 상태도 아니고, stale 상태도 아닌 것이다.
그에 따라 refetch의 조건인 stale 상태일 경우, refetch를 해도 fetch하지 않는 것이다.
아래는 한번 클릭했을 때의 api 상태와 console.log(data)이다.
data가 오지 않는다, 단순히 query에서 반환된 함수를 써서 activate가 됐을 뿐 내가 원하는 결과가 아니다, Side-Effect에 가깝다.
다시 한번 클릭해보자
data는 출력이 되지만 stale 상태가 되지 않는다.
(!!!!!추측!!!!!)찾아봐도 잘 안나와서 모르겠지만, enabled 상태가 false 이기 때문에 자동으로 stale로 바꿔주지 않는 것 같다... ㅜㅜ 정답을 알려주시면 감사하겠습니다.
결과적으로 바꾼 코드는 아래와 같다.
setState를 통해 첫 번째 클릭시에는 enabled의 값을 true로 바꿔줌으로써 데이터를 fetching해오고, 그 이후부터는 refetch를 진행했다.
const { data, refetch } = useQuery({
queryKey: ["searchBook", inputTitle.current],
queryFn: () => fetchBooks(inputTitle.current),
select: (data) => data.documents,
enabled: enabled,
staleTime: 1000 * 1,
});
<Button
onClick={() => {
if (!enabled) setEnabled(true);
else refetch();
}}결과는?
한번의 검색으로, query의 enabled를 true로 바꿔줌으로써 fetching을 진행하고 activate 해준다.
다시 클릭해도, refetch가 stale상태임을 감지하고, refetch하기 때문에 올바르게 진행이 된다.
잘 된다~
