<p>apollo-link-error 호출자에게 오류 반환</p>

내 앱에도 같은 문제가 있습니다. 오류 링크의 모든 오류를 포착하고 싶지만(예를 들어 기록할 수 있도록) 오류를 원래 호출자에게 전달하고 사용자에게 표시해야 하는 사용자 지정 오류 메시지가 포함될 수 있으므로 거기에서 처리하고 싶습니다. .

내 코드:

• 제공자에서:

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
        console.log(`[GraphQL error]: ${message}, Location: ${locations}, Path: ${path}`);
      },
    );
  }
});

const client = new ApolloClient({
  link: authLink.concat(errorLink).concat(httpLink),
  cache: new InMemoryCache(),
});

• 구성 요소에서:

 loginMutation({ variables: { data } })
    .then(({ data, errors }) => {
      if (errors) {
        // I WANT TO BE ABLE TO READ ERROR MESSAGE HERE SO I CAN DISPLAY IT TO THE USER
      } else if (data) {
        ....
      }
    });

forward 를 호출하면 then 대한 인수로 undefined를 반환하므로 데이터도 오류도 없고 errors 를 null 설정하므로 도움이 되지 않습니다

@lbrdar 이에 대한 해결 방법을 찾았습니까?

아니 😞

@lbrdar 이것을 하는 방법은 캐치(catch)를 사용하는 것 아닙니까?

 loginMutation({ variables: { data } })
    .then(({ data, errors }) => {
      if (errors) {
        // I WANT TO BE ABLE TO READ ERROR MESSAGE HERE SO I CAN DISPLAY IT TO THE USER
      } else if (data) {
        ....
      }
    }).catch(errors => {

    });

@lbrdar @romucci 저도 같은 문제에 직면하고 있습니다. 여러분, 결국 해결하셨나요?

@Nosherwan 방금 버전 1.1.11을 설치했고 이제 모든 것이 잘 작동합니다... 내부 약속을 확인할 수도 있습니다(어딘가 다른 약속 안에 약속을 반환하는 것을 잊었을 수도 있음)

@merksam 님, 댓글 감사합니다.
나는 당신과 똑같은 버전을 사용하고 있습니다. 불행히도 동작은 동일합니다.

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) => {
        console.log(`[GraphQL error]: ${message}, Location: ${locations}, Path: ${path}`);
      },
    );
  }
});

위의 코드 블록에서 graphQLErrors가 포착되고 onError 핸들러에서 뭔가를 할 수 있습니다. 그러나 이러한 오류는 실제 호출 약속으로 전달되지 않습니다.
나는 비동기 함수를 사용하고 있으므로 'then' 대신 await 키워드를 사용하고 있으며 이는 try catch 블록 안에 있습니다.
catch 블록은 오류를 포착하지만 전달된 오류는 없습니다.

누군가 이에 대한 해결 방법을 찾았습니까?

@Nosherwan @prem-prakash 채팅으로 연락하거나 전화를 걸어 내 경우에는 작동하고 귀하의 경우에는 작동하지 않는 이유를 알아내려고 할 수 있습니까? (여전히 관련성이 있는 경우)

이상한 해결책을 찾았지만 다음과 같습니다.

이것은 메시지를 인쇄합니다

  updateProfile: function() {
      this.$apollo
        .mutate({
          mutation: UPDATE_PROFILE,
          variables: current_user
        })
        .catch((error) => {
          console.log("this prints just the message", error);
        });
    }

그러나 이것은 오류의 전체 내용을 인쇄합니다.

  updateProfile: function() {
      this.$apollo
        .mutate({
          mutation: UPDATE_PROFILE,
          variables: current_user
        })
        .catch(({ graphQLErrors }) => {
          console.log("this prints the full content of 'errors'", graphQLErrors);
        });
    }

이 문제는 닫을 수 있다고 생각합니다
@Nosherwan @romucci @Sceat @lbrdar

이것을 문서에 추가하는 것은 어떻습니까?

죄송하지만 위의 솔루션이 작동하지 않습니다. 링크 오류의 graphqlErrors를 초기 호출자에게 다시 보내는 방법에 대한 전체 예를 생각합니다.

필자의 경우 오류가 발생하면 다음 ApolloQueryResult 객체가 onError에서 콘솔링된 오류 세부 정보를 얻지 못합니다. 시도 중 일부는 ... 통화를 둘러싸고 있습니다. 서버에서 graphqlError 세부 정보를 가져올 수 없습니다. 그냥 "400 오류"..

const gqlResult: ApolloQueryResult<IGReturnData<
            IAllDataTypes
        >> = await apolloClient.query<IGReturnData<IAllDataTypes>, TVariables>({
            query: queryGql,
            variables: queryVariables,
            errorPolicy: "all",
        });

서버 구성:

const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors)
        graphQLErrors.forEach(({ message, locations, path }) =>
            console.log(
                `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
            ),
        );

    if (networkError) console.log(`[Network error]: ${networkError}`);
});

const httplink = new HttpLink({
    uri: "/graphql",
    credentials: "include",
});

const links = [errorLink, httplink];

export const apolloClient = new ApolloClient({
    link: ApolloLink.from(links),
    cache: new InMemoryCache({ addTypename: false, fragmentMatcher }),
});

@prem-prakash 감사합니다.... 구원자..

이 문제는 매우 지속적입니다. 내 프로젝트의 graphql 서버는 제어할 수 없고 클라이언트만 제어할 수 있습니다. 서버는 올바른 모양의 graphql 오류로 응답하지만 상태 코드는 400입니다. 오류 링크에서 graphQLErrors 액세스할 수 있지만 구성 요소 변형에서 @prem-prakash에서 제안한 대로 graphQLErrors 를 빼낼 때 graphQLErrors 는 빈 배열입니다. . 기본 메시지 "오류: 네트워크 오류: 응답 실패: 수신 상태 코드 400"에만 액세스할 수 있습니다. Apollo는 400 상태 코드가 Apollo의 마침표이기 때문에 서버에서 사람이 읽을 수 있는 오류 메시지("사용자 또는 암호가 올바르지 않음")를 방해하고 있습니다.

오류 메시지가 포함된 400 상태 코드 응답을 성공적으로 처리하고 해당 메시지를 돌연변이를 호출한 구성 요소의 UI에 전달할 수 있는 사람이 있습니까?

좋아, 나는 꽤 불합리한 접근 방식을 가지고 있지만 작동하고 있습니다.

캐시에 부울 hasGraphError 를 설정하고 오류 메시지도 캐시합니다.

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(error => {
      // log gql error(s)
      console.log("[GraphQL error]: ", error);
      // cache error
      client.writeData({
        data: {
          hasGraphError: true,
          currentGraphError: error.message
        }
      });
    });
  }
  if (networkError) {
    // log network errors
    console.log("[Network error]: ", networkError);
  }
});

그런 다음 MutationError 구성 요소에서 캐시에 오류 및 오류 메시지가 있는지 쿼리하고 조건부로 gql 오류 또는 실제 네트워크 오류를 렌더링합니다.

const HAS_ERROR = gql`
  query IsGraphErrorPresent {
    hasGraphError <strong i="11">@client</strong>
    currentGraphError <strong i="12">@client</strong>
  }
`;
export default function MutationError({ error }) {
  const { data } = useQuery(HAS_ERROR);
  const defaultErrorMessage =
    "We're having trouble connecting. Please check your internet connection and try again.";

  // real network error
  if (error && error.message.includes("Failed to fetch")) {
    return <Error>{defaultErrorMessage}</Error>;
  }

  // graph error
  if (error && data && data.hasGraphError) {
    return <Error>{data.currentGraphError}</Error>;
  }

  // probably a real server/network error
  if (error) {
    return <Error>{defaultErrorMessage}</Error>;
  }

  return null;
}

내 서버가 _항상_ 200 + graphql 오류가 되어야 하는 것에 대해 400을 반환하기 때문에 이것은 모든 돌연변이에 필요하기 때문에 전역적일 것입니다(나는 그것에 대해 약간 짠합니다)...

여기서 중요한 점은 모든 구성 요소 변형에서 Apollo의 처리되지 않은 예외를 방지하는 빈 onError 콜백을 사용한다는 것입니다. 성공하면 캐시에서 hasGraphError 부울을 재설정해야 한다는 것을 기억해야 합니다.

  const [someMutation, { loading, error, client }] = useMutation(SOME_MUTATION, {
    onError() {
      // this callback prevents apollo from throwing
      // ...unhandled exception on 400 status code
    },
    onCompleted({ someMutation }) {
      client.writeData({
        data: {
          hasGraphError: false
        }
      });
    }
  });

그런 다음 돌연변이 오류 구성 요소는 useMutation 오류를 소품으로 사용합니다(둘 다 실제 네트워크 오류를 결정할 수 있게 하고 잘못된 구성 요소에서 전역 캐시된 gql 오류를 렌더링하지 않도록 합니다).

  {loading && <Spinner />}
  {error && <MutationError error={error} />}

내가 말했듯이 이 접근 방식은 매우 비합리적이지만 현재 해결하기 위해 노력하고 있습니다.

1. 응답에 200이 아닌 상태 코드가 있는 경우에도 일반적으로 UI에서 graphql 오류를 처리할 수 있습니다.
2. 특히 UI에서 렌더링하기 위해 apollo-link-error 구성에서 호출 구성 요소로 오류를 전달할 수 있습니다.

코딩된 이 접근 방식의 문제: 이는 어레이의 마지막 GQL 오류를 캐시에 기록하므로 동시에 여러 GQL 오류를 지원하지 않습니다. 이것은 오류 배열을 작성하고 이를 캐시에 저장하여 관리하기가 상당히 쉬워야 하지만 이를 수행하려면 로컬 스키마/리졸버를 정의하거나 잠재적으로 JSON.stringify를 사용하여 저장해야 합니다. 문자열로 캐시합니다. 또한 부울 값을 false로 설정하는 대신 성공 시 캐시에서 currentGraphError를 지워야 합니다.

그것이 누군가를 돕기를 바랍니다!

또한 도움이 되는 경우 errorPolicy는 현재 useMutation 후크에서 작동하지 않습니다. 이것은 버그이며 최근 이 PR에서 해결되었습니다: https://github.com/apollographql/apollo-client/pull/5863 하지만 현재 출시되지 않았습니다.

이에 대한 개발자의 진전 사항이 있습니까?