Apollo-link: networkError [apollo-link-error]에 대한 응답 필드가 정의되지 않았습니다.

이 버그에 대한 임시 해결 방법이 있습니까?

+1 서버 환경에서 apollo 클라이언트를 사용하는 경우 디버깅에 대한 꽤 큰 문제입니다(리졸버에 대해 다른 GraphQL 서버에서 데이터 읽기).

+1
조건부로 오류를 무시하는 해결 방법이 있습니까?

나는 또한이 문제가 있습니다.

나에게 큰 문제는 이것이 UI가 이 오류를 인식하지 못하게 한다는 것입니다. 실제로 큰 오류가 발생하면 로드 상태로 유지됩니다.

나는 이것을 조사했고 문서에 따르면 콜백에 응답해야합니다.
https://www.apollographql.com/docs/link/links/error.html#callback

일반 콜백을 사용하면 다음과 같은 일이 발생합니다 .

그러나 networkError: https://github.com/apollographql/apollo-link/blob/master/packages/apollo-link-error/src/index.ts#L62

병합될 시기에 대한 통찰력이 있습니까? :)

아마도 곧, apollo 팀은 새로운 클라이언트와 반응 버전을 출시하는 데 집중할 것입니다.

이 문제에 진전이 있습니까?

이에 대한 진전이 있는지도 궁금합니다. 아니면 그동안의 해결 방법? API에서 UI로 사용자 정의 오류 메시지를 전파하는 방법을 갖고 싶습니다.

나는 또한 같은 문제에 직면했습니다. 나를 위한 해결 방법은 빈 Observable을 반환하는 것이었습니다.

예외를 던지지 않고 서버가 503에 응답하는 경우를 대비하여 조용히 유지 페이지로 리디렉션하고 싶었습니다. 여기 내 코드가 있습니다. 아마도 누군가에게 도움이 될 것입니다.

import { Observable } from 'apollo-link';

...

onError(({ networkError }: any) => {
      if (networkError && networkError.status === 503) {
        this.redirectService.goToMaintenance();
        return Observable.of();
      }
});

...

@ luki215 오류 코드 필드가 없습니다

@Sceat 어떤 apollo-link 을 사용합니까? 나는 apollo-angular-link-http 를 사용하므로 차이가 있을 수 있습니다.

@luki215 실제로 내 잘못이었습니다. AWS api 게이트웨이를 사용하여 200 코드가 있는 다른 항목에 대해 CORS 응답을 올바르게 구성하지 않았습니다.

문제가 발생하는 사람들의 경우 기본 4xx에서 API 게이트웨이 응답을 추가할 수 있습니다.

또는 serverless.yml에서
yml GatewayDefault4XX: Type: 'AWS::ApiGateway::GatewayResponse' Properties: ResponseParameters: gatewayresponse.header.Access-Control-Allow-Origin: "'*'" gatewayresponse.header.Access-Control-Allow-Headers: "'*'" ResponseType: DEFAULT_4XX RestApiId: Ref: 'ApiGatewayRestApi'

나는 같은 걸림돌에 부딪히고 있으며 오류 메시지를 생성하기 위해 내 반응 응용 프로그램에 메시지를 전달할 수 없다고 생각합니다. 이 문제에 대한 수정 사항이 진행 중입니까?

@strass 는 이 응답 필드에 대해 모르지만 오류를 처리하기 위해 네트워크 오류를 켤 수 있습니다.

export default onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
        for (let { extensions: { code } } of graphQLErrors)
            handleTheError(code)
    }
    if (networkError) {
        switch (networkError.statusCode) {
            case 500:
                //
                break
            case 429:
                //
                break
            case undefined:
                //
                break
            default:
                console.error(networkError)
                break
        }
    }
})

빈 Observable을 반환하는 @luki215 의 해결 방법을 시도했지만 제 경우에는 이제 react-apollo가 예외를 throw하게 만들 것입니다.

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
    at Mutation._this.onMutationCompleted (react-apollo.esm.js:627)
    at react-apollo.esm.js:564

Mutation 를 사용하여 구성 요소에 반환된 오류를 변경하기 위해 이것을 사용하고 있습니다.

const errorLink = onError(({ forward, networkError, operation }) => {
  if (networkError) {
    const { message: errorMessage } = networkError.result;
    switch (networkError.statusCode) {
      case 400:
        if (errorMessage) {
          networkError.message = errorMessage;
        }
        break;
      case 403:
        window.location = '/users/login';
        break;
      default:
        break;
    }
  }
  forward(operation);
});

사람들이 여기서 찾고 있는 핵심은 networkError 에서 반환된 오류 문자열을 재정의하는 기능이며 이 networkError.message = 'Some custom error message.' 로 완료됩니다.

apollo-link-rest 및 이 패키지를 파헤친 후 해키 해결 방법을 생각해 냈습니다. onError 를 사용하는 대신 내 자신을 다시 작성했습니다(아래).

의도: NetworkError 를 가로채 조건부로 GraphQLError 로 변환합니다. 그 이유는 GraphQL 규칙을 따르지 않고 400 상태 코드와 함께 {"message": "{ \"key\": \"not valid\"}"} 와 같은 모양을 반환하는 REST 끝점을 사용하고 있기 때문입니다. 이것은 NetworkError로 취급되어서는 안됩니다.

작동 원리: 이 솔루션은 mutate promise catch 내에서 검색 및 구문 분석하고 하위 양식의 상태를 수정할 수 있는 방식으로 응답에서 실제 오류 메시지를 체인 아래로 전달합니다. .

작동하지 않는 것:

• 오류를 올바른 방법으로 전달하기 위해 observer.next({ data: { ... }, errors: { ... } }) 를 사용하는 것을 선호하지만 작동하지 않습니다(해당 데이터는 아무데도 가고 돌연변이 약속은 해결되지 않는 것으로 보입니다).
• observer.next() 및 observer.error() 를 순서대로 호출하면 예상했던 동작 이 없습니다. 오류 호출만 적용되는 것 같습니다.

const errorLink = new ApolloLink((operation, forward) => {
    return new Observable(observer => {
      let sub: ZenObservable.Subscription;

      try {
        sub = forward!(operation).subscribe({
          next: result => {
            console.log("A proper result looks like:", result);
            observer.next(result)
          },
          error: networkError => {
            try {
              const { message } = networkError.result;
              const error = new GraphQLError(message);
              const apolloError = new ApolloError({
                errorMessage: "Some error happened",
                graphQLErrors: [error],
                networkError: undefined,
              });

              observer.error(new Error(message));
            } catch (_) {
              observer.error(networkError)
            }
          },
          complete: () => {
            console.log("Calling complete()");
            observer.complete();
          },
        });
      } catch (e) {
        console.log("ErrorLink had an error of its own")
        observer.error(e);
      }

      return () => {
        if (sub) sub.unsubscribe();
      };
    });
  });

이것이 작동하는 것처럼 보이지만 mutate() 함수는 해결되거나 거부되지 않는 것 같습니다 then() 또는 catch() 모두 호출되지 않습니다.

const errorLink = new ApolloLink((operation, forward) => {
    return new Observable(observer => {
      let sub: ZenObservable.Subscription;

      try {
        sub = forward!(operation).subscribe({
          next: result => {
            console.log("A proper result looks like:", result);
            observer.next(result)
          },
          error: networkError => {
            try {
              const { message } = networkError.result;
              const error = new GraphQLError(message);

              // this is called, but it seems to be the end of the line
              console.log("Intercepting error, returning success");
              observer.next({ data: {}, errors: [ error ]});
            } catch (localError) {
              console.error("Error in link:", localError);
              observer.error(networkError)
            }
          },
          complete: () => {
            console.log("Calling complete()");
            observer.complete();
          },
        });
      } catch (e) {
        console.log("ErrorLink had an error of its own")
        observer.error(e);
      }

      return () => {
        if (sub) sub.unsubscribe();
      };
    });
  });

그냥 밀고...
지금 같은 오류에 걸려 넘어졌습니다.
구성 요소 자체의 오류를 처리하기 위해 응답 필드의 오류를 재설정하고 싶습니다...

어떤 진전이 있습니까?

같은 문제에 +1.

(적어도 내 오류 전파 문제에 대한) 해결책을 찾았을 수도 있다고 생각합니다.

errorLink 에서 map 를 forEach 로 바꾸면 오류가 UI에 오류를 전파할 수 있음을 의미합니다(이전에는 UI 구성 요소의 result.error가 정의되지 않았으나 이제는 오류가 있음).

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

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

나는 또한 같은 문제에 직면했습니다. 나를 위한 해결 방법은 빈 Observable을 반환하는 것이었습니다.

예외를 던지지 않고 서버가 503에 응답하는 경우를 대비하여 조용히 유지 페이지로 리디렉션하고 싶었습니다. 여기 내 코드가 있습니다. 아마도 누군가에게 도움이 될 것입니다.

import { Observable } from 'apollo-link';

...

onError(({ networkError }: any) => {
      if (networkError && networkError.status === 503) {
        this.redirectService.goToMaintenance();
        return Observable.of();
      }
});

...

이것은 저에게 효과가 있었지만 문서에서 말하는 것과 정확히 반대입니다. 예를 들어 "오류 콜백은 요청을 다시 시도하려는 경우 forward(operation) 호출에서 관찰 가능한 항목을 선택적으로 반환할 수 있습니다. 다른 것을 반환해서는 안 됩니다."

오늘 Apollo를 업데이트한 후 위의 솔루션은 더 이상 apollo-hooks를 통해 UI에 대한 graphQL 오류를 전달하지 않습니다.

누구든지 다른 해결책이 있습니까?

@strass 위의 솔루션 이 문제를 해결하는 이유를 설명할 수 있습니다. IMO 그들은 forEach 및 map 를 사용하여 정확히 동일한 작업을 수행합니다.

더 이상 그렇지 않습니다(https://github.com/apollographql/apollo-link/issues/855#issuecomment-538010335 참조).

이에 대한 진전이 있습니까?

응답 객체를 전혀 얻을 수 없다면 서버가 재인증을 위해 "Location" 헤더가 있는 302를 반환하는 경우를 어떻게 처리해야 할까요?

누군가 단서가 있으면 알려주십시오. 왜냐하면 우리는 아폴로를 포기할 생각을 하고 있기 때문입니다.

이것은 https://github.com/apollographql/apollo-link/issues/297#issuecomment -350488527에 큰 도움이 되었으며 네트워크 응답을 읽을 수 있게 해줍니다.

인증 계층/게이트웨이 API에서 무단 응답이 반환될 때 중요한 것입니다.

이것을 핵심 기능의 일부로 보고 싶습니다!

이에 대한 진전이 있습니까? 이것은 의도된 동작입니다. 200이 아닌 상태 코드로 GraphQL 오류를 클라이언트에 전달할 수 있는 다른 방법은 무엇입니까?

네트워크 오류를 포착하고 수정하는 데 문제가 있는 다른 사람을 위한 참고 사항입니다. 나는 graphql의 내부 오류로 네트워크 오류를 풀려고 시도했고 다음과 같이 끝났습니다.

const errorHandler = onError(({ graphQLErrors, networkError, operation, forward, response }) => {
    if (graphQLErrors) {
      console.error('apollo errors', graphQLErrors);
    }
    if (networkError) {
      console.error('apollo network errors', networkError);
      if (!!networkError['error'] && !!networkError['error']['errors'] && networkError['error']['errors'][0]) {
        console.error('unwrapping apollo network errors');
        networkError.message = networkError['error']['errors'][0].message;
        // you may also be able to set networkError.message to null based on criteria to remove the error, even if you can't prevent an error from being triggered altogether
      }
    }
  }
);

// Create an http link:
const httpLink = new HttpLink(this.httpClient).create({
  uri: this.uri,
  headers: new HttpHeaders({
    Authorization: this.token
  }),
  includeExtensions: true
});

const httpErrorLink = ApolloLink.from([
  errorHandler,
  httpLink,
]);

기본적으로 일반 네트워크 오류 메시지인 메시지를 첫 번째 내부 오류 메시지로 바꿉니다. 나처럼 여기까지 온 사람들에게 도움이 될 수 있다.