react query 내에서 과연 react hook을 사용해도 괜찮을까요? 에러 내용을 어떻게 뽑아내면 좋을까요?

안녕하세요. 결론: useMutation이 반환하는 error 객체를 사용하셔라. (첨부 코드 참고) 공식 문서 https://tanstack.com/query/latest/docs/react/reference/useMutation 참고하시면 되는데, error 객체에 들어있는 정보는 onError에서 첫 번째 인자로 받은 error 정보와 동일한 것 같군요. 결론과는 별개로 굳이 만약에 react-query에서 error 객체에 접근할 수 있는 인터페이스를 제공하지 않았다고 한다면, state를 정의해서 사용했을 것 같습니다. 관련해서 질문자님께서 "하나의 hook 내에서 다른 hook 을 선언해버리면 리액트의 훅 규칙을 어기는 것으로 알고 있습니다."라고 말씀하셨는데, 이 부분은 다시 한번 생각해 보시면 좋을 것 같아요. usePostLogin라는 커스텀 훅 내에서 const [errorMessage, setErrorMessage] = useState("");를 정의한 게 과연 리액트의 훅 규칙을 어긴 것인가?에 대해서 말입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

function App() {
  const { mutate: loginMutate, error } = useMutation({
    mutationFn: async () => {
      const response = await axios.post('/api/test');
      const { data } = response;

      return data;
    },
    onSuccess: (data) => {
      console.log(data);
    },
    onError: (error) => {
      // 여기서 받은 error랑 useMutation이 내뱉는 error랑 같음
      console.log(error);
    },
  });

  return (
    <div>
      <button onClick={() => loginMutate()}>로그인</button>
      <p>{error?.message}</p>
    </div>
  );
}

export default App;