원본

Breaking React Query's API on purpose

한국어 버전

[번역] React Query API의 의도된 중단

<aside> 💡 v5에서는 useQuery에서 onSuccess / onError / onSettled 콜백을 제거할 가능성이 높습니다.

</aside>

나쁜 API

export function useTodos() {
  return useQuery({
    queryKey: ['todos', 'list'],
    queryFn: fetchTodos,
    onError: (error) => {
      toast.error(error.message)
    },
  })
}

사용자들은 더이상 uesEffect를 사용할 필요가 없다는 점에서 onError를 React Query의 큰 장점으로 여깁니다.

export function useTodos() {
  const query = useQuery({
    queryKey: ['todos', 'list'],
    queryFn: fetchTodos,
  })

  React.useEffect(() => {
    if (query.error) {
      toast.error(query.error.message)
    }
  }, [query.error])

  return query
}

위 예제에서 effect는 useEffect를 사용한 접근 방식의 문제점을 확실히 보여주죠. 바로 앱에서 useTodos()를 두 번 호출하면 두 개의 에러 알림을 받게 되는 겁니다!