리액트 쿼리 1

1. 리액트 쿼리 install
2. 쿼리 프로바이더 가져와서 전역에 감싸기

 

useQuery 의존성 배열 챙기기

const {data, isError, error, isLoading} = useQuery(["post", currentPage], fetchData, {
		staleTime:20000,
        keepPreviousData : true
	})
    
post : 쿼리 키
currentPage : 페이지네이션시 쓰이는 변수이자 의존성 배열

예제에서는
const [currentPage, setCurrentPage] = useState(1);
=> currentPage 가 달라지면 fetchData 호출

fetchData : staleTime이 지나면 계속 찌르는 api
keepPreviousData : 이전 페이지로 돌아가도 캐시 데이터 그대로 남아있음

근데 저렇게 구현하면 페이지 클릭할 때마다 계속 로딩바 뜸
=> 프리 패칭으로 미리 가져와서 사용자 경험 올려주기

 

프리 패칭
=> 가져와서 캐시에 넣어놓고 (stale data)
=> 필요할 때 가져오는 거
=> 이러면 로딩이 필요 없음

그러니까 미리 싹 가져와서 캐싱해놓고 사용자가 필요할 때 보여주는 거


prefetch 는 useQueryClient 메서드임
=> app.tsx에 놓았지만 컴포넌트 또 import해서 가져와야함

useQuery 라는 hook을 통해 queryClient을 가져올 수 있음

컴포넌트 내에서

const {useQueryClient} from "react-query";
const queryClient = useQueryClient();

상태 업데이트가 비동기로 일어나기 때문에 return 문 밑에 버튼에 바로 넣으면
업데이트 됐는지 안 됐는지 제어가 안 됨
이를 useEffect를 통해서 제어하는 게 베스트

useEffect(()=> {
	const nextPage = currentPage + 1
	queryClient.prefetchQuery(["posts", nextPage],()=> fetchPosts(nextPage))
 },[currentPage, queryClient])
    
 -> 쿼리가 캐시에 이미 있는지 여기서 확인함

 

위 코드는 currentPage +1 데이터를 미리 가져옴 => 프리 패칭

 

 

isFetching vs isLoading


isFetching
aysnc 가 해결되지 않았을 때 => true
데이터 가져오는 중


isLoading
isFetching 가 true + 해당 키에 캐시된 데이터가 없을 때

 

const {data, isError, error, isFetching} = useQuery(["post", currentPage], fetchData, {
		staleTime:20000,
        keepPreviousData : true
	})
    

if(isFetching)return <h3>...loading</h3>

이렇게 isLoading 대신 isFetching 를 쓰면 캐시된 데이터가 있든 없든 로딩바 보여줌

 

staleTime
=> 데이터가 fresh->stale 상태로 변경되는데 걸리는 시간
=> fresh 일때 쿼리가 새롭게 mount 되어도 fetch 안 함
=> 설정 안 해주면 0이 디폴트 (그래서 설정 안 해주면 계속 패칭함)


cacheTime
=> 메모리에 저장된 캐싱 데이터가 유효한 시간, 설정 안 해주면 5분이 디폴트(v4는 인피니티)
=> 데이터가 inactive 상태일 때 캐싱된 상태로 남아 있는 시간
=> 쿼리가 unmount되면 데이터는 inactive되고 cacheTime 만큼 데이터는 유지됨
=> cacheTime이 지나면 가비지 콜렉터로 수집됨
=> cacheTime이 지나기 전에 다시 mount 되면, 데이터를 fetch하는 동안 캐시 데이터 보여줌

 

이거 너무 헷갈려서 gpt한테 물어봤다

이게 리액트 쿼리 핵심 기능인 것 같다