[reactjs] 반응-아폴로 사용시 오류 처리

Program / 글쓴이

나는이 문제를 해결하려고 노력했지만 그에 대한 강력한 대답을 찾지 못했습니다. useMutation 후크를 사용하여 로그인 돌연변이를 실행하려고합니다.

TLDR; 옵션에 전달 된 onError와 useMutation에 의해 나에게 주어진 오류의 차이점이 정확히 무엇인지 알고 싶습니다.

여기 내 코드 스 니펫이 있습니다.

const [login, { data, loading, error }] = useMutation(LOGIN_QUERY, {
        variables: {
            email,
            password
        },
        onError(err) {
            console.log(err);
        },
});

서버 측에는 로그인에 사용되는 사전 설정 / 하드 코딩 된 이메일이 있으며 Apollo 또는 다른 클라이언트를 사용하지 않습니다. 이 로그인 돌연변이 해결 프로그램에서 이메일이 다음과 같이 동일하지 않으면 오류가 발생합니다.

throw new Error('Invalid Email');

이제 클라이언트 측 (React) 에서이 오류를 처리하고 싶습니다. 그러나 내 관심사는 useMutation 후크에서 반환 된 ‘오류’를 사용 하고이 방법으로 오류를 표시하려고한다는 것입니다

render() {
...
{error && <div> Error occured </div>}
...
}

오류는 UI에서 업데이트 된 다음 즉시 React에서 처리되지 않은 거부 (오류) 화면이 표시됩니다. Graphql 오류 : My-custom-error-message

그러나 onMutate 함수를 사용하기 위해 옵션에 전달 된 onError를 사용하면이 화면이 표시되지 않으며 오류로 원하는 것을 수행 할 수 있습니다.

옵션에 전달 된 onError와 useMutation에 의해 나에게 주어진 오류의 차이점이 정확히 무엇인지 알고 싶습니다 .onError를 사용 하지 않을 때 React에서 해당 오류 화면을 표시하는 이유는 무엇입니까 ?

감사!

답변

: 아폴로는 API를 통해 오류가 두 종류의 노출 GraphQL 오류 로 응답의 일부로 반환됩니다, errors와 함께, data및 네트워크 오류 요청이 실패 할 때 발생합니다. 서버에 도달 할 수 없거나 응답 상태가 200 이외의 경우 네트워크 오류가 발생합니다. 응답 errors에있는 쿼리 의 상태는 여전히 200입니다. 그러나 예를 들어 잘못된 쿼리는 Apollo Client의 400 상태 및 네트워크 오류

Apollo Client는 실제로 돌연변이 오류를 처리하는 네 가지 방법을 제공합니다.

1.) mutate후크에 의해 리턴 된 함수를 호출하면 Promise가 리턴됩니다. 요청이 성공하면 약속합니다 해결 (가) 포함하는 응답 객체를 data서버에서 반환. 요청이 실패하면 약속이 오류와 함께 거부 됩니다. 따라서 콘솔에 “처리되지 않은 거부”메시지가 표시됩니다. 거부 된 약속을 처리해야합니다.

login()
  .then(({ data }) => {
    // you can do something with the response here
  })
  .catch(e => {
    // you can do something with the error here
  })

또는 async / await 구문을 사용하십시오.

try {
  const { data } = await login()
} catch (e) {
  // do something with the error here
}

기본적으로 약속은 거부 하거나 GraphQL 오류 또는 네트워크 오류 합니다. 그러나 errorPolicy 를 ignore또는 로 설정하면 allPromise는 네트워크 오류에 대해서만 거부합니다. 이 경우 응답 개체를 통해 GraphQL 오류에 계속 액세스 할 수 있지만 약속은 해결됩니다.

2.) onError기능 을 제공 할 때 위의 유일한 예외가 발생 합니다. 이 경우 약속은 거부하지 않고 항상 해결되지만 오류가 발생하면onError 하면 결과 오류와 함께 호출됩니다. 여기서 errorPolicy설정 한 사항도 여기에 적용 onError됩니다. 항상 네트워크 오류가 발생하지만 기본값 errorPolicy인을 사용할 때 GraphQL 오류가 발생합니다 none. 사용 onError은 거부 된 약속을 잡는 것과 같습니다. 오류 처리기를 mutate함수의 호출 사이트에서 후크의 호출 사이트로 이동합니다.

3.) 후크는 mutate함수 외에도 useMutation결과 객체를 반환합니다. 이 객체는 또한 돌연변이를 실행할 때 발생하는 모든 오류를 노출합니다. 위에서 쓴 오류 처리기 함수와 달리이 error개체는 응용 프로그램 상태를 나타냅니다 . 둘 다errordata이러한 방식으로 노출 된 개체 와 개체 편의상 존재합니다. 그들은 이것을하는 것과 같습니다 :

const [mutate] = useMutation(YOUR_MUTATION)
const [data, setData] = useState()
const [error, setError] = useState()
const handleClick = async () => {
  try {
    const { data } = await mutate()
    setData(data)
  catch (e) {
    setError(e)
  }
}

이와 같은 오류 상태를 갖는 것은 UI에 오류가 있음을 반영하도록하려는 경우 유용 할 수 있습니다. 예를 들어, 돌연변이가 오류없이 실행될 때까지 요소의 색상을 변경할 수 있습니다. 위의 상용구를 직접 작성하는 대신 제공된 결과 개체를 사용하면됩니다.

const [mutate, { data, error }] = useMutation(YOUR_MUTATION)

참고 : 노출 된 오류 상태를 사용하여 UI를 업데이트 할 수는 있지만 실제로 오류를 처리 하는 것 대신 사용할 수는 없습니다 . 당신 있어야 어느 쪽 제공 onError콜백 또는 catch처리되지 않은 약속 제거에 대한 경고를 방지하기 위해 오류를.

4.) 마지막으로 아폴로 링크 오류를 사용할 수도 있습니다 를 하여 요청에 대한 전역 오류 처리 를 추가 . 예를 들어 응용 프로그램에서 요청이 시작된 위치에 관계없이 오류 대화 상자를 표시 할 수 있습니다.

응용 프로그램에서 이러한 방법 중 어떤 방법을 사용 하려는지 (전역 대 로컬, 상태 대 콜백 등)에 크게 의존합니다. 대부분의 응용 프로그램은 둘 이상의 오류 처리 방법을 사용합니다.

답변