1. react-query V5 마이그레이션에 대한 고민

현재 우리가 사용중인 react-query는 v4이다. sentry를 사용하려는데, 버전 5에서 duplicated되었다면서 logger 코드를 제거하라고 한다. 그리고 기존에는 @suspensive/react-query의 useSuspensiveQuery를 사용하여 useQuery에서 제공하는 data의 값의 undefined타입을 제거해서 분기처리 없이 사용했다. 그런데 react-query 5로 버전이 업그레이드 되며 useSuspensiveQuery를 공식적으로 지원한다는 것이다. 이러한 소식에 솔깃했다. react-query를 사용하기 더 편해진 것이 아닐까?

1. V5에서 바뀐 것에는 어떤 게 또 있을까?

주요한 변화만 작성해보자.

1. 각 쿼리 훅의의 인자가 객체 형태로 모두 바뀌었다.

   

2. 기존 cacheTime → gcTime으로 변경 (garbase collect의 약자)

   

3. useQuery에서 onSuccess, onError, onSettle 제거 : 예측 가능하고 일관성을 위해

   1. onError → Error Boundary로 에러 처리
   • mutation에서의 콜백은 그대로 유지된다.

4. 낙관적 업데이트 간소화 : variables사용

   const queryInfo = useTodos()
   const addTodoMutation = useMutation({
     mutationFn: (newTodo: string) => axios.post('/api/data', { text: newTodo }),
     onSettled: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
   })
   
   if (queryInfo.data) {
     return (
       <ul>
         {queryInfo.data.items.map((todo) => (
           <li key={todo.id}>{todo.text}</li>
         ))}
         {addTodoMutation.isPending && (
           <li key={String(addTodoMutation.submittedAt)} style={{ opacity: 0.5 }}>
             {addTodoMutation.variables}
           </li>
         )}
       </ul>
     )
   }
   

5. useMutationState로 mutation상태 공유

6. infinite query에서도 prefetch

7. Hydrate컴포넌트 → HydrationBoundary

8. loading → pending, isLoading → isPending

9. useRrorBoundary → throwOnError

10. 서버에서 retry 횟수 3 → 0

2. 팀원과 논의

혼자서 결정하기에는 변경 사항이 너무나 많았다.

우선, V5로 바꾸고 싶은 이유와 바꾸지 않아야 할 이유를 혼자서 생각해보았다.