사이즈가 큰 앱에서 리액트 쿼리를 이용하는 경우

• fetching 과 Error에 관한 인디게이터를 중앙화.
• 데이터를 refetching 하도록 해 제어할 수 있어야 함

queryClient.ts

import { QueryClient } from "@tanstack/react-query";

const queryClient = new QueryClient({
	defaultOptions: {
	    queries: {
	      retry: 3,
	      useErrorBoundary: true,
	    },
	    mutations: {
	      useErrorBoundary: true,
	    },
	  },
});

Custom Hook

• 사이즈가 큰 앱에서는 Custom Hook을 만들어서 이용하고는 함.
• 장점
  • 다수에 컴포넌트에서 데이터를 액세스 해야하는 경우 useQuery호출을 재작성 할 필요가 없음.
  • 다수의 useQuery 호출을 사용하는 경우, 사용중인 키의 종류를 헷갈릴 수가 있는데 Custom Hook을 사용하는 경우 키를 헷갈릴 위험이 없음.
  • 커스텀 훅에 넣어주면 다수의 컴포넌트에 굳이 불러올 필요가 없기 때문에, 사용하길 원하는 쿼리 함수를 혼동하는 위험도 없음
    • 구현을 변경하기로 결정했다면, 컴포넌트는 업데이트를 할필요 없이 훅을 업데이트를 하기만 하면됨.

예시

async function getTreatments(): Promise<Treatment[]> {
  const { data } = await axiosInstance.get('/treatments');
  return data;
}

export function useTreatments(): Treatment[] {
  const { data } = useQuery({
    queryKey: [queryKeys.treatments],
    queryFn: getTreatments,
  });

  return data;
}