TanStack Query(react-query) v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary

📒 react-query v5 주요 변경점 알아보기

---

새로운 프로젝트에 생각없이 react-query를 설치하고 예전 방식 그대로 사용하려는데 여기저기 오류가 빵빵 터져나갔습니다.

왜이러지 싶어 package.json을 찾아보니 메이저 버전이 업데이트 되었고,
공식문서를 천천히 훑어보니 생각보다 사용 방식이 변경된 것이 많아 주요 변경점들을 짚고 넘어가겠습니다.

 

📌 hook 옵션 객체 형태로 변경

버전이 올라가며 훅에 옵션을 넣어주는 방식이 객체 형태로 바뀌어 더욱 직관적인 모습을 보입니다.

• 기존 사용 방식

const { data } = useQuery(['queryKey'], getData);
const mutation = useMutation(setData);

 

• 변경 후 사용 방식

const { data } = useQuery({ queryKey: ['queryKey'], queryFn: getData });
const mutation = useMutation({ mutationKey: ['mutationKey'], mutationFn: setData })

 

📌 Suspense 트리거 옵션 변경

• 기존 사용 방식

const { data } = useQuery(['queryKey'], getData, { suspense: true });

// or
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true
    },
  },
});

기존에는 queryClient에 suspense: true 기본 옵션을 부여하던가, useQuery 훅에 별도의 옵션을 주어 suspense를 트리거할 수 있었지만 이제는 Suspense를 사용하기 위한 hook이 별도로 출시되었습니다.

 

• 변경 후 사용 방식

const { data } = useSuspenseQuery({ queryKey: ['queryKey'], queryFn: getData });

이제는 Suspense를 사용하려면 query hook에 옵션 대신 useSuspenseQuery 를 이용해서 데이터를 받아와야 합니다.

 

📌 Suspense와 함께 사용하지 못하는 enabled 옵션

• 기존 사용 방식

const { data } = useQuery(['queryKey'], getData, { suspense: true, enabled: false });

기존에는 useQuery에 suspense와 enabled 옵션을 동시에 부여해 특정 값에 의존적인 쿼리를 동기적으로 호출할 수 있었습니다.

 

• 변경 후 사용 방식

// useQuery는 enabled 사용 가능
const { data } = useQuery({
  queryKey: ['queryKey'],
  queryFn: getData,
  enabled: false,
});

// useSuspenseQuery는 enabled 사용 불가
const { data } = useSuspenseQuery({ queryKey: ['queryKey'], queryFn: getData });

이제는 suspense와 enabled 옵션 두 가지를 동시에 사용할 수 없도록 변경했습니다.

위 Omit 유틸리티 타입은 뒤 union of string으로 받은 keys를 제외한 타입을 생성합니다.

즉, useSuspenseQuery 함수에 enabled 타입을 제외했다는 의미입니다.

 

개발진들의 생각을 정확하게 알 순 없지만 유추하기로는 성공한 상태 분리를 위해 탄생한 Suspense의 역할을 더 견고히 하려는 의미가 있지 않을까 합니다.

 

📌 ErrorBoundary 트리거 옵션 변경

• 기존 사용 방식

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

기존에는 suspense 옵션을 부여하거나, 별도로 useErrorBoundary 옵션을 부여하면 ErrorBoundary로 에러가 전파되었습니다.

 

• 변경 후 사용 방식

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

변경 후에는 queries와 mutations 각각 속성에 별도로 throwOnError 옵션을 부여해야 에러 전파가 가능해졌습니다.

 

그럼 메이저 버전 업데이트 대응에 도움이 되었길 바랍니다.