TanStack Query(React Query) -3

Query Cancellation

다운로드 UI 가 있을 때, 또는 UX를 저해시키는 불필요한 네트워크 요청을 제거하기 위해 사용된다.

대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행 중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있다.

queryFn 의 매개변수로 Abort Signal 을 받을 수 있고, 이를 이용해서 Query 취소를 가능하게 한다.

*모든 get 요청마다 Abort Signal을 심으면 작업부하를 일으킨다.

Optimistic Updates

서버 요청이 정상적으로 잘 될거란 가정 하에 UI 변경을 먼저하고, 서버 요청 하는 방식이다. 혹시라도 서버 요청이 실패하는 경우, UI를 원상복구 한다.

Prefetching

페이지 이동 전에 이동할 페이지의 쿼리를 백그라운드에서 미리 호출한다. 캐시 데이터가 있는 상태로 해당 페이지로 이동 시 로딩없이 바로 UI를 볼 수 있다.

const prefetchTodos = async () => {
  // prefetch 할 queryKey와 queryFn 은 이동할 페이지의 쿼리와 동일해야 적절함.
  await queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
}

Paginated / Lagged Queries

다른 페이지 클릭 시 매번 Loading UI를 보여주기보다는 기존 UI를 유지하다가 서버로부터 새로운 데이터를 받아왔을 때 바꾸는 방식을 적용할 수 있다.

useQuery의 옵션 중 keepPreviousData를 true 로 바꾸면 이전 캐시데이터를 기반으로 isLoading 여부를 판단하게 한다.

Infinite Queries

Data Fetching이 일어날 때 마다 기존 리스트 데이터에 Fetched Data 를 추가하고자 할 때 유용하게 사용할 수 있는 hook 이다.

더보기 UI 또는 무한스크롤 UI 에 사용하기에 적합하다.