react-query

React App에서 비동기 로직을 쉽게 다루게 해주는 라이브러리입니다.

♻️ React Query LifeCycle

Query는 4가지의 상태를 가집니다.

라이프 사이클 상태 정의

• fresh : 새롭게 추가된 쿼리, 만료되지 않은 쿼리
  • 컴포넌트 마운트, 업데이트되어도 재요청하지 않음
  • default staleTime : 0 으로 설정되어 있기 때문에 호출이 끝나면 바로 stale 상태로 변함
  • staleTime을 늘려줄 경우, fresh 상태가 유지되며, 쿼리가 다시 마운트되도 패칭이 발생하지 않고 기존의 fresh 값 반환
• fetching : 요청 중인 쿼리
• stale : 만료된 쿼리
  • 컴포넌트 마운트, 업데이트되면 데이터 재요청(리패칭 요청)
• inactive : 비활성화된 쿼리
  • active 쿼리가 하나도 없는 쿼리
  • inactive된 이후, cacheTime 동안 캐시 데이터 유지
  • cacheTime 이후 가비지 컬렉터(GC)에 의해 제거

데이터를 Refetching 하는 경우?

• 브라우저에 포커스가 들어온 경우 (refetchOnWindowFocus)
• 새로 마운트 된 경우 (refetchOnMount)
• 네트워크가 끊어졌다가 다시 연결된 경우 (refetchOnReconnect)
• react-query는 캐싱 된 데이터는 항상 stale 판단 -> stale 상태 데이터 Refetching

라이프 사이클

1. User 쿼리 인스턴스 mount
2. 네트워크에서 데이터 fetch -> User의 query key로 캐싱
3. 데이터는 fresh 상태에서 staleTime(default:0) 이후 stale 상태로 변경
4. User 쿼리 인스턴스 unmount
5. 캐시는 cacheTime(default:1000x60x5 (5분)) 유지 후 GC에 의해 제거
6. cacheTime 지나기전 User 쿼리 인스턴스가 새롭게 mount 되면, fetch 실행하며, fresh 한 값을 가저오는 동안 캐시 데이터를 보여줌

---

StaleTime vs CacheTime ?

staleTime

• 데이터 fresh ➡ stale 상태로 변경되는데 소요되는 시간
• fresh 상태인 경우 쿼리 인스턴스가 새롭게 mount되도, 네트워크 fetch 가 발생하지 않음
• 데이터가 fetch 된 후, staleTime 이 지나지 않았다면, unmount 이후 mount 되어도 fetch 가 발생하지 않음
• default : 0

cacheTime

• 데이터가 inactive 상태일 때, 캐싱된 상태로 남아있는 시간
• 쿼리 인스턴스가 unmount되면 inactive 상태로 변경됨
• 캐시는 cacheTime 만큼 유지
• cacheTime이 지나면 GC로 수집
• cacheTime이 지나기 전에 쿼리 인스턴스가 다시 mount되면, 데이터 fetch 동안 캐시 데이터를 보여줌
• default:1000x60x5 (5분)

불필요한 호출방지

staleTime을 조절하기

staleTime을 변경하여 리엑트 쿼리애개 캐시된 데이터를 얼마나 자주 최신화 시켜줘야 하는지 알려줄 수 있다.

stale time에 대한 정확한 모범답안은 없다. tkdodo 블로그에 따르면 (react query maintainer) 최소 20초 정도면 중복 호출 문제를 해결할 수 있다고 설명되어 있음

받아오는 데이터가 자주 변하는 데이터가 아니라면?

• staletime 시간을 늘려 fresh 상태로 길게 유지할 수 있습니다.
• cacheTime 시간을 늘려 GC 처리되는 기간을 늘릴 수 있습니다.
• refetch 가 발생하는 trigger 조건을 off 처리하기
  ➡ refetchOnMount, refetchOnWindowFocus, refetchOnReconnect

const usePost = () => {
  const queryData = useQuery(
      queries.posts.getPosts(page, limit).queryKey,
      getPostsApi,
      {
          staleTime: 600000, // 10 minutes
          cacheTime: 3600000, // 1 hours
          refetchOnMount: false,
          refetchOnWindowFocus: false,
          refetchOnReconnect: false,
      },
    );
}

자주 변하는 데이터 라면?

refetchInterval 을 통해 데이터의 변화를 지속적으로 감시할 수 있습니다.

  const postData = useQuery(
    queries.posts.getPosts(page, limit).queryKey,
    getPostsApi,
      {
        refetchInterval: 60000 // every minute;
      }
  ))