[FE테크톡] TenStack Query

TanStack Query makes fetching, caching, synchronizing and updating server state.

new QueryClient로 인스턴스를 생성하고 QueryClientProvider를 통해 전역에서 생성한 QueryClient에 접근 가능하도록 만든다. QueryClient 내에는 QueryCache와 MutationCache가 있다. useQuery를 호출하여 QueryClient, 렌더링 트리거 여부를 파악하기 위한 현재 결과값 등이 담 Observer를 생성하고, 이 Observer를 통해 Query가 생성되어 cache에 저장되며 Query와 컴포넌트가 연결된다.

import axiosInstance from '@/api/axiosInstance';
import { useQuery } from '@tanstack/react-query';

export const fetchData = async <T>(url: string) => {
  try {
    const response = await axiosInstance.get<{ data: T; status?: number }>(url);
    return response.data;
  } catch (error: any) {
    console.error(error);
  }
};

export const useBaseQuery = <T>(queryKey: any, url: string) => {
  return useQuery({
    queryKey,
    queryFn: async () => {
      return await fetchData<T>(url);
    },
  });
};

 

useQuery를 통해 isLoading, isFetching, errr 상태에 따라 반환할 수 있어, 서버에서 받아온 데이터를 따로 보관하지 않고 바로 보여줄 수 있다.또한 useQuery 훅의 파라미터를 통해 API 데이터의 만료 시간, 리프레쉬 간격, 데이터를 캐시에서 유지할 기간, 브라우저 포커스 시 데이터 리프레쉬 여부 등 다양한 기능을 제어할 수 있다.

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery(
  {
    queryKey,
    queryFn,
    gcTime,
    enabled,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    notifyOnChangeProps,
    placeholderData,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    select,
    staleTime,
    structuralSharing,
    throwOnError,
  },
  queryClient,
)

---

QueryClient의 methods

• queryClient.fetchQuery
• queryClient.fetchInfiniteQuery
• queryClient.prefetchQuery: 서버에서 쿼리 데이터를 미리 가져와 사용자 경험을 향상
• queryClient.prefetchInfiniteQuery
• queryClient.getQueryData: 특정 쿼리의 현재 캐시된 데이터를 가져옴
• queryClient.getQueriesData
• queryClient.setQueryData: 수동으로 특정 쿼리의 데이터를 캐시에 설정
• queryClient.getQueryState: 특정 쿼리의 현재 상태를 가져옴
• queryClient.setQueriesData
• queryClient.invalidateQueries: 캐시된 데이터를 무효화
• queryClient.refetchQueries
• queryClient.cancelQueries
• queryClient.removeQueries: 캐시된 쿼리들을 제거
• queryClient.resetQueries: 캐시에 있는 쿼리들을 초기화 후 refetch
• queryClient.isFetching
• queryClient.isMutating
• queryClient.getDefaultOptions
• queryClient.setDefaultOptions
• queryClient.getQueryDefaults
• queryClient.setQueryDefaults
• queryClient.getMutationDefaults
• queryClient.setMutationDefaults
• queryClient.getQueryCache
• queryClient.getMutationCache
• queryClient.clear: 연결된 모든 캐시를 제거

isLoading과 isFetching, isRefetching

isLoading

The isLoading property is true when a query is being fetched for the first time. This includes both manual and automatic fetches.

isFetching

The isFetching property is true whenever a query is being fetched, regardless of whether it is initial fetch or a refetch. Even if there is already cached data for the query, the isFetching will be true.

isRefething

The isRefetching property is true only when a query is being refetched manually using the refetch() function.

Error Boundary

React 컴포넌트 트리 하위에 있는 컴포넌트 내부에 JavaScript 에러를 캐치하는 컴포넌트로, React 16에서 도입되었다. 하위 컴포넌트 트리 어디에서든 JavaScript 에러를 기록하고 에러 컴포넌트 대신 fallback UI를 보여주며, 상위에서 가장 근접한 Error Boundary로 전파된다.

useQuery의 onError가 deprecated되면서, 에러를 전역으로 잡는 방법이 떠오르고 있다. 또한 재시도 할 수 있는 컴포넌트로 커스텀할 수 있으며, Suspense도 추가하여 서버 상태에 따른 UX를 개선시킬 수 있다.

<QueryErrorResetBoundary>
	{({ reset }) => (
		<ErrorBoundary
        	onReset={reset}
            fallback={ErrorFallback}
            message="사용자를 로드하는데 실패 하였습니다."
        >
        	<Profile />
        </ErrorBoundary>
	)}
</QueryErrorResetBoundary>