v4 변경점

기존의 react-query에서 버전이 4로 업그레이드 되면서 이름도 변경되고 몇가지 주요 기능이 변경되었다.

1. status 세분화
   기존 useQuery 리턴값 중 하나였던 status가 fetchStatus와 status로 세분화되었다. 각각의 용어는 다음과 같다.

   • status : data, query 결과값에 대한 정보를 나타냄

     • loading : 아직 data가 없음
     • error : data는 없고 error가 발생
     • success : data가 있다

   • fetchStatus - queryFn에 대한 정보를 나타냄
     - idle : 쿼리가 아무것도 안하고 있는 상태
     - paused : 쿼리가 패칭을 시도했지만 일시중지된 상태, network 상태와 연관이 있다.
     - fetching : 쿼리가 패칭중인 상태

     status가 하나였을 때는 표현이 애매한 상황이 많았다. 이전에는 query가 success상태이면 fetchStatus는 idle인 상태가 보통이었겠지만, 백그라운드 패칭이 발생할 수도 있어서 fetching인 상태일 수 있었다.
     (여기서 백그라운드 패칭은 명시적으로 데이터를 불러오는 상황이 아닌, 포커싱이 되었다거나 네트워크에 다시 연결되었을 때의 패칭 상황을 뜻한다.) 이러한 상황을 해소시키기 위해 v4에서 업그레이드되었다.

2. networkMode 옵션 추가
   v4에서는 query와 mutation의 명시적인 오프라인 모드를 제공하는 기능인 networkMode 옵션이 추가되었다.
   설정값은 다음과 같다.
   
   • online : 오프라인 상태에서 network connection이 있기 전까지 fetch를 하지 않고, 이때 쿼리의 상태를 fetchStatus: paused로 표시한다.
   • always : 오프라인 상태에서도 fetch를 시도한다. 오프라인 상태에서 요청을 보내는 것이니 당연히 errorr상태가 된다.
   • offilneFirst : v3 에서의 동작과 같다. queryFn 최초 추출 후 retry를 멈춘다.

3. onSuccess() 콜백함수가 setQueryData를 호출했을 때 더이상 호출되지 않는다. onSuccess() 콜백은 실질적인 요청이 발생한 후에만 호출된다.
   기존 동작에서는 setQueryData가 onSuccess 안에서 불릴 수도 있어 무한루프의 원인이 되기도 했다.
   그리고 data가 바뀐 것을 실질적으로 구독하고 싶다면, onSuccess보단 useEffect에 dependancy array를 넣어 사용할 것을 권장한다.

4. active, inactive 통합
   queryClient를 이용해 여러개의 조건에 맞는 쿼리들에 일괄적으로 변화를 주는 active, inactive 옵션이 type하나로 통합되었다.

   
   

5. Tracked Query 기능 추가
   useQuery의 리턴값 중, 실질적으로 직접 접근하는 값들이 변했을 때만 리렌더링이 되게끔하는 최적화이다.
   이전에는 수동으로 옵션을 지정하여 사용하였지만, v4부터는 수동옵션이 없어도 자체적으로 query를 proxy처리하고, component안에서 어떤 값에 접근하는 판단하여 해당 값을 구독하게 된다.
   
   

6. queryKey값 형태 배열로 변경
   useQuery의 queryKey값으로 이제 배열만 넘길 수 있다.

   useQuery(['todo'], fetchTodos);

   
   

7. useQueries에 여러개 쿼리를 넘길 때의 방법 변경

   useQueries([{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }]) 			// v3
    useQueries({
      queries: [{ queryKey1, queryFn1, options }, { queryKey2, queryFn2, options }]  				// v4
    });