리액트 쿼리3

 

  const treatments = useTreatments();
  
  ....
  return(
  <>
    treatments.map((el)=>(
    <div>{el}</div>
    ))
  </>
  )
  
 
useTreatments();
=> get을 아예 hook으로 뺌

 

import { useQuery } from 'react-query';
import type { Treatment } from '../../../../../shared/types';
import { queryKeys } from '../../../react-query/constants';


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

export function useTreatments(): Treatment[] {
  // TODO: get data from server via useQuery
  const fallback = [];
  const { data = fallback } = useQuery(queryKeys.treatments, getTreatments);
  // 이렇게 하면 데이터가 없을 때 빈값으로 표기 됨
  return data;
}


import { queryKeys } from '../../../react-query/constants';

그냥 키를 모아둠
CONSTANT

const queryKeys  = {
  treatments : "treatments",
  .....
}

 

 

useIsFetching 으로 loading 확인 후 불러오기

loading 컴포넌트는 app에서 띄워버림

 

 

 

에러 핸들링 (useQuery 쓸 때마다 에러가 생긴다면 해당 함수에서 에러처리하지 않고 하나에서 처리)

 

import { createStandaloneToast } from '@chakra-ui/react';

import { theme } from '../theme';

const toast = createStandaloneToast({ theme });

function queryErrorHandler(error: unknown): void {
  // error is type unknown because in js, anything can be an error (e.g. throw(5))
  const title =
    error instanceof Error ? error.message : 'error connecting to server';

  // prevent duplicate toasts
  toast.closeAll();
  toast({ title, status: 'error', variant: 'subtle', isClosable: true });
}

// 쿼리 부를 때 에러가 난다면 queryErrorHandler를 호출
export const queryClient = new queryClient({
  defaultOptions: {
    queries: {
      onError: queryErrorHandler,
    },
  },
});


만약 저기서 에러를 해결하지 않고 싶은 예외 경우가 생긴다면

{useErrorBoundary : true} 옵션을 사용하면 됨
사용법은 똑같이 예외 에러처리가 필요한 useQuery에 option을 주면 되는데

원리로는
가장 가까운 전파의 에러 처리가 있다면 그걸로 처리하게끔 만든다 함