React Query

🔄라이프사이클

fetching -> fresh -> stale -> inactive -> delete

• fetching : 데이터 요청 상태.

• fresh : 데이터가 만료되지 않은 상태.
  (컴포넌트의 상태가 변경되어도 데이터를 다시 요청하지 않는다. 새로고침하면 다시 fetching.)

• stale : 데이터가 만료된 상태.
  (최신화가 필요한 데이터. 컴포넌트가 Mount, update 되면 데이터를 다시 요청)

• inactive : 사용하지 않는 상태.
  (기본값 5분이 지나면 Garbage Collector가 캐시에서 제거.)

• delete : Garbage Collector에 의해 캐시에서 제거된 상태.

staleTime vs. cacheTime

staleTime : fresh -> stale 상태로 변경되는데 걸리는 시간. (데이터가 만료되기까지 걸리는 시간.)

cacheTime : inactive 상태일 때 캐싱된 상태로 남아있는 시간.

React Query에서 staleTime과 cacheTime의 차이

( 이 내부는 뇌피셜입니다.

staleTime 기본값이 0인 이유에 대한 추측과 토론, with.@lumpenop

- 만약 staleTime이 없고, 계속 사용한다면. 만료되지 않고 inactive 상태로 가지 않을 것이다. 따라서 staleTime을 0으로 설정해서 새로고침 해줄 수 있게 하는걸까?
slateTime=0일경우 fresh->(0초)->stale->inactive

- staleTime을 주지 않으면 stale상태가 없을 것이다. 만료되지 않을 것이다.

- cacheTime은 5분일 경우, inactive가 될 때 부터 5분동안 로컬캐싱을 해서 데이터를 계속 남아있게 해주는 것으로 생각한다.

어렵다...

[Discussions / staleTime vs. cacheTime](https://github.com/tannerlinsley/react-query/discussions/1685)

)

💟React Query 장점

• 캐싱
• update하면 자동으로 get 수행
• 데이터가 오래되었으면 다시 get invalidateQueries
• 동일 데이터 요청시 한번만 요청.

설치

$ yarn install react-query

✅useQuery

1. 데이터를 get 하기 위한 API.
2. return 값 (객체) -> api 성공/실패 여부, api return 값 포함.
3. 비동기로 작동. 한 컴포넌트에 여러개의 useQuery가 있으면 여러개가 동시에 실행됨. 이런경우 useQueries 추천
4. enabled 를 통해 useQuery를 동기적으로 사용할 수 있음.

반환값

• data : queryFunction이 반환한 Promise resolve 데이터
• isLoading : 캐시된 데이터가 없는 상태에서 데이터를 요청중일 때 true
• isFetching : 캐시 데이터 유무와 상관없이 데이터를 요청중일 때 true

옵션

• cacheTime : unused / inactive 캐시 데이터를 메모리에서 유지시킬 시간.
  기본값은 5분.
  Infinity로 설정하면 쿼리 데이터가 캐시에서 제거되지 않는다.

• staleTime : 쿼리 데이터가 fresh에서 stale로 전환되는데 걸리는 시간이다.
  기본값은 0.
  Infinity로 설정하면 쿼리 데이터는 직접 캐시를 무효화할 때까지 fresh 상태로 유지된다.
  캐시는 메모리에서 관리되므로 브라우저 새로고침 후에는 다시 가져온다.

• onSuccess : queryFunction이 성공적으로 데이터를 가져왔을 때 호출되는 함수이다.

• onError : queryFunction에서 오류가 발생했을 때 호출되는 함수이다.

• onSettled : queryFunction이 성공, 실패한 경우 모두 실행되는 함수이다.

• keepPreviousData : queryKey가 변경되어 새로운 데이터를 요청하는 동안에도 마지막data값을 유지한다.
  페이지네이션을 구현할 때 유용하다. 캐시되지 않은 페이지를 가져올 때 화면에서 viewing 컴포넌트가 사라지는 현상을 방지할 수 있다.
  isPreviousData값으로 현재의 queryKey에 해당하는 값인지 확인할 수 있다.

• initialData : 캐시된 데이터가 없을 때 표시할 초기값이다.placeholder와는 달리 캐싱이 된다. 브라우저 로컬 스토리지에 저장해 둔 값으로 데이터를 초기화할 때 사용할 수 있을 것이다.

• refetchOnWindowFocus : 윈도우가 다시 포커스되었을 때 데이터를 호출할 것인지 여부이다. 기본값은true이다.

참고

🔁useInfiniteQuery

무한스크롤.
useInfiniteQuery

• data : [pages, pageParams] 값이 담김.
• fetchNextPage : 다음 페이지 호출 함수.
• hasNextPage : 다음 페이지가 있는지 판단. (getNextPageParam 리턴값으로)
• isFetchingNextPage : fetchNextPage 를 통해 fetching이 되고 있는지 판단.
• pageParam : page를 지정해준다. 기본값 1을 기준으로 다음 데이터를 불러온다.
• getNextPageParam : page를 1 증가시킨다.

공식 가이드
참고