[RTK Query] 1. RTK Query에 대해 알아보자

Redux toolkit 공식문서에 따르면 

RTK Query is powerful data fetching and caching tool 
강력한 데이터 패칭과 캐싱 툴을 지원해주고 있다. 

  
본인도 RTK를 한 3개월 정도 써본 결과 직접 느낀 장점들이 있었다.
 

❏ Api로부터 호출된 데이터가 캐싱된다. 

- RTK를 사용하지 않을 경우, 검색 조회조건이 변경될 때마다 api를 호출했을 것이다. 하지만 RTK를 쓰니, 이미 호출했던 조건으로 변경 했을 때 캐싱된 데이터가 있어, API 재호출을 안해주는 특징이 있었다. 
  

❏ API  응답 상태를 따로 명시안해도 된다.

Redux-thunk를 사용하게 되면 pending,fullfiled,rejected 를 제공해주어 비동기 처리가 가능한 점이있다.
하지만 loading 같은 경우 직접 사용자가 state로 loading중인지 따로 선언해줘야한다. 하지만 rtk에서는 isLoading과 status 라는 property를 제공해주므로, 간단하게 데이터 관리가 가능해진다. 

  const { data, error, isLoading } = useGetUserInfo('12345');

  

▌ Queries
➡ 주로 데이터를 가져올 때 Queries를 사용하곤 한다. (select : GET)
 Quries 속성은  SELECT 하는데 사용된다.
 
endpoints
쿼리의 엔드포인트는 providesTags를 정의하여 캐시 무효화를 식별하고, Mutation을 통해 추가 및 제거가 될때 캐시 lifecycle  callback 을 제공해주게 된다.
 
Queries hook의 인자들 
쿼리의 훅은 두개의 파라미터를 보낼 수 있다.
(queryArg?, queryOptions?) ==> 쿼리 인자 와 쿼리 옵션 (둘다 필수아닌 선택) 
- queryArg는 api호출을 위해 보낼 인자를 뜻한다.
- queryOptions param은 데이터 fetching의 동작을 다룰 수 있도록 하는 옵션이다. 
 
▌ Queries hook 옵션
➡ skip (default:false)  

❍ 쿼리 패칭을 skip할지 unskip할지 해준다. 

➡ pollingInterval (default : 0)  

❍ 쿼리가 지정된 milli seconds간격으로 리패칭할지를 설정한다.

➡ selectFromResult  

❍ 리턴 된 결과값에 원하는 값만 골라낼 수 있도록 할 수있다. (sql문의 where 조건절과 비슷하다)  

➡ refetchOnMountOrArgChange (default:false)    

❍ 쿼리가 항상 마운트 될때마다 리패칭할 수 있도록 허락해준다.
❍ 타입이 number로 넘어오게 될 경우에는  쿼리에 이미 존재하는 캐시가 있을 때, 현재 시간과 마지막으로 응답이 성공한 timestamp와 비교하여, 주어진 숫자이 경과될 경우에만 리패칭을 해준다.
❍ 값은 boolean | number로 넘어올 수있다. 

➡ refetchOnFocus (default:false)  

❍ 브라우저가 다시 focus 되었을때 쿼리를 리패칭 해준다.

➡ refetchOnReconnect(default : false)  

❍네트워크 커넥션이 다시 이루어졌을 경우 리패칭해준다.
 
- example

  const { data, error, isLoading } = useGetUserInfo({id:'testUser', {skip : false, pollingInterval:3});

 
 
▌Mutation
➡ 생성/업데이트 또는 삭제할 때 주로 Mutation을 사용하곤 한다. (insert,update,delete , PUT OR POST) 

뮤테이션은 주로 업데이트를 하거나, 로컬 캐시에 변경된 사항을 적용하고, 무효화된 캐시 데이터를 강제로 리패치가 가능하다.    
Tag
우린 주로 데이터에 변화가 일어나게 되면, 다시 list api를 재호출하여 사용자 인터페이스에 보여주도록 한다. 이것을 우린 
providesTags와 invalidateTags를 사용하게 된다면, 해당 refatching을 효율적으로 사용할 수 있다.
 결과가 캐시되기 전에 수정되어야 한다면,   invalidateCaches를 제공하여, 할 수있다. 
 
 
▌ Mutation에서 제공해주는 property들
data :   가장 최근 트리거된 응답이다. 데이터가 전달받기 전엔 undefined를 응답받을 것이다. 그리고 
error : 현재 기준의 에러
isUninitialized : true일 경우 이는 뮤테이션이 아직 실행이 안되었다는 말을 뜻하게 된다.
isLoding : true일 경우, 이는 뮤테이션을 아직 응답을 기다리고 있음을 뜻하게 된다.
isSuccess : true일 경우 이는 마지막으로 실행된 뮤테이션이 응답에 성공했음을 뜻하게 된다.
isError : true일 경우,  이는 마지막으로 실행된 뮤테이션 응답이 실패했음을 뜻하게 된다.
reset :  이 메소드는 현재 캐싱된 응답을 지우고, 기존 state로 리셋시켜준다. 
 
 

▌ 요약

Queries : 데이터를 가져오고 싶을때 사용 [SELECT]
Mutation : 데이터를 변경 혹은 캐시를 무효화 하고 싶을 때 사용 [UPDATE,DELETE]
 
 
 
--- 작성 중 (계속)