TanStack Query (React Query) v5 업데이트

못보던 사이에 리액트쿼리 버전 5 알파 버전이 나왔다.

깃허브 가보니 알파 버전 올라가는 중이고, 홈페이지 가서 v5 눌러보니 슬슬 오픈할라고 시동걸고 있던데, 나야 뭐 토이 프로젝트이므로 부담 없이 바로 알파 버전 올려서 쫒아가봤다.

공식 문서 마이그레이션 가이드

기본 리액트 버전이 18로 변경이 되었고, 제일 큰 변경사항으론 파라미터를 이제 오브젝트 형태로만 받는다는 것이다.

// before
const { data: posts = [], refetch: refetchPosts } = useQuery(
  ['getBlogPostsAPI', isAdmin, isLoadingMe, categoryId],
  () => getBlogPostsAPI(categoryId).then((res) => res.data),
  { enabled: !isLoadingMe },
);

// after
const { data: posts = [], refetch: refetchPosts } = useQuery({
  queryKey: ['getBlogPostsAPI', isAdmin, isLoadingMe, categoryId],
  queryFn: () => getBlogPostsAPI(categoryId).then((res) => res.data),
  enabled: !isLoadingMe,
});

예전에는 생략 가능했던 queryKey나 queryFn이 이제 필수로 들어간다. 탠스택 놈들이 TypeScript 타입 정의 만들기 빡친다고 아예 오브젝트로 받도록 함. 처음엔 아 시발 저걸 언제 다 바꿔~~~ 하고 짜증났는데, 생각보다 바꾸는게 금방 걸렸고 별다른 문제 없이 배포까지 잘 되었다.

또 큰 변경 중 하나는 onSuccess나 onError가 없어졌다는 점이다. 내 경우 then이나 catch 로 다 체이닝 해서 쓰고 있어서 이것의 영향을 받지 않았는데, 사람에 따라 코피 흘리는 사람이 나올 수 있겠다.

좀 웃기는 점은.. cacheTime이 사실 캐시랑 아무 상관이 없었다는 점이다. 이건 gcTime으로 개명되었다 ㅠㅠ 혼동되기 참 좋은 이름이 바뀌어서 다행. useErrorBoundary도 행동 패턴에 맞게 throwOnError로 개명되었다. use 갖다 붙이는게 무슨 훅 같아서 맘에 안들기도 했지..

keepPreviousData도 없어지게 되었고, useInfiniteQuery에는 defaultPageParam이 추가되었다.

또한 status: loading이 status: pending으로 바뀌었다. isLoading 역시 isPending으로 바뀌었으며, isInitialLoading이 isLoading으로 바뀐점이 좀 크다. 이 부분 맘에 안들고 헷갈리는 부분이었는데 잘 바뀌었지 싶다.

ps. 커뮤니티 모 분의 간증으로는 "걔들은 버전업을 너무 자주하고, 또 맨날 메이저 업데이트라 별일 없으면 업데이트 안하는게 좋다 봄" 이라고 하네요.