Apollo-link: नेटवर्क त्रुटि के लिए प्रतिक्रिया क्षेत्र अपरिभाषित है [अपोलो-लिंक-त्रुटि]

क्या इस बग के लिए कोई अस्थायी समाधान है?

+1 डिबगिंग के लिए एक बहुत बड़ी समस्या है यदि आप सर्वर वातावरण में अपोलो क्लाइंट का उपयोग कर रहे हैं (अपने रिज़ॉल्वर के लिए एक अलग ग्राफ़क्यूएल सर्वर से डेटा पढ़ना)।

+1
क्या सशर्त रूप से त्रुटियों को अनदेखा करने के लिए कोई समाधान है?

मेरे पास भी यह मुद्दा है।

मेरे लिए बड़ी समस्या यह है कि यह UI को इस त्रुटि से अवगत होने से रोकता है। वास्तव में कोई बड़ी त्रुटि होने पर यह लोडिंग स्थिति पर रहता है।

मैंने इस पर ध्यान दिया है और दस्तावेज़ों के अनुसार, कॉलबैक को प्रतिक्रिया दी जानी चाहिए:
https://www.apollographql.com/docs/link/links/error.html#callback

सामान्य कॉलबैक के साथ ऐसा होता है: https://github.com/apollographql/apolo-link/blob/master/packages/apolo-link-error/src/index.ts#L46

लेकिन नेटवर्क त्रुटि के साथ: https://github.com/apollographql/apollo-link/blob/master/packages/apolo-link-error/src/index.ts#L62

इसका विलय कब किया जाएगा इस पर कोई अंतर्दृष्टि? :)

संभवत: बहुत जल्द, अपोलो टीम नए क्लाइंट और प्रतिक्रिया संस्करण को जारी करने पर ध्यान केंद्रित कर रही है।

इस मुद्दे पर कोई प्रगति?

मैं यह भी सोच रहा हूं कि क्या इस पर कोई प्रगति हुई है? या इस बीच कोई उपाय? मैं एपीआई से यूआई में कस्टम त्रुटि संदेशों को प्रचारित करने का एक तरीका चाहता हूं।

मैं भी इसी मुद्दे का सामना कर रहा था। मेरे लिए वर्कअराउंड खाली ऑब्जर्वेबल वापस करना था।

अगर सर्वर 503 का जवाब देता है - अपवाद फेंकने के बिना मैं चुपचाप रखरखाव पृष्ठ पर रीडायरेक्ट करना चाहता था। यहाँ मेरा कोड है, शायद यह किसी की मदद करेगा:

import { Observable } from 'apollo-link';

...

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

...

@ luki215 मेरे पास कोई त्रुटि कोड फ़ील्ड नहीं है

@ आप किस apollo-link का उपयोग करते हैं? मैं apollo-angular-link-http का उपयोग करता हूं, ताकि यह अंतर हो।

@ luki215 यह वास्तव में मेरी गलती थी, एडब्ल्यूएस एपीआई गेटवे का उपयोग करके मैंने किसी और चीज के लिए सीओआरएस प्रतिक्रिया को ठीक से कॉन्फ़िगर नहीं किया है कि 200 कोड

समस्या में चल रहे लोगों के लिए आप डिफ़ॉल्ट 4xx में एपीआई गेटवे प्रतिक्रियाओं पर जोड़ सकते हैं:

या 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
        }
    }
})

एक खाली ऑब्जर्वेबल को वापस करने के लिए बस @ luki215 के वर्कअराउंड की कोशिश की, लेकिन मेरे मामले में जो अब प्रतिक्रिया-अपोलो को एक अपवाद बना देगा:

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 में बदल दें। कारण, मैं एक आरईएसटी एंडपॉइंट का उपयोग कर रहा हूं जो ग्राफक्यूएल सम्मेलन का पालन नहीं करता है, और 400 स्टेटस कोड के साथ {"message": "{ \"key\": \"not valid\"}"} जैसे आकार देता है। इसे NetworkError के रूप में नहीं माना जाना चाहिए।

क्या काम करता है: यह समाधान श्रृंखला के नीचे प्रतिक्रिया से वास्तविक त्रुटि संदेश को पास करता है, इस तरह से मैं इसे mutate वादे 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।

मुझे लगता है कि मुझे एक समाधान मिल गया होगा (कम से कम मेरी त्रुटि प्रसार समस्या के लिए):

त्रुटि लिंक में map को forEach से बदलने का मतलब है कि त्रुटियां UI में त्रुटियों का प्रसार कर सकती हैं (पहले परिणाम। UI घटक में त्रुटि अपरिभाषित थी, अब इसमें त्रुटि है):

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}`);
});

मैं भी इसी मुद्दे का सामना कर रहा था। मेरे लिए वर्कअराउंड खाली ऑब्जर्वेबल वापस करना था।

अगर सर्वर 503 का जवाब देता है - अपवाद फेंकने के बिना मैं चुपचाप रखरखाव पृष्ठ पर रीडायरेक्ट करना चाहता था। यहाँ मेरा कोड है, शायद यह किसी की मदद करेगा:

import { Observable } from 'apollo-link';

...

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

...

इसने मेरे लिए काम किया है, लेकिन यह दस्तावेज़ीकरण के बिल्कुल विपरीत काम कर रहा है, यानी "त्रुटि कॉलबैक वैकल्पिक रूप से अनुरोध को पुनः प्रयास करने के लिए आगे (ऑपरेशन) कॉल करने से एक अवलोकन योग्य वापस कर सकता है। इसे कुछ और वापस नहीं करना चाहिए।"

आज अपोलो को अपडेट करने के बाद मेरा उपरोक्त समाधान अब यूआई में अपोलो-हुक के माध्यम से ग्राफक्यूएल त्रुटियों को वहन नहीं करता है।

क्या किसी के पास दूसरा उपाय है?

@strass क्या आप बता सकते हैं कि ऊपर दिया गया आपका समाधान समस्या को ठीक क्यों करता है। आईएमओ वे forEach और map का उपयोग करके बिल्कुल वही काम करते हैं।

यह अब और नहीं है (देखें https://github.com/apollographql/apolo-link/issues/855#issuecomment-538010335 )

इस पर कोई प्रगति?

यदि हम प्रतिक्रिया वस्तु बिल्कुल नहीं प्राप्त कर सकते हैं, तो हम ऐसे मामले से निपटने के लिए कैसे हैं जहां सर्वर "स्थान" शीर्षलेख के साथ 302 लौटा रहा है?

अगर किसी के पास कोई सुराग है तो मुझे बताएं क्योंकि हम अपोलो छोड़ने की सोच रहे हैं :(

इससे मुझे व्यापक रूप से https://github.com/apollographql/apolo-link/issues/297#issuecomment -350488527 में मदद मिली और नेटवर्क प्रतिक्रियाओं को पढ़ने की अनुमति मिली।

प्रमाणीकरण परतों/गेटवे एपीआई से अनधिकृत प्रतिक्रियाएं लौटाए जाने पर कुछ महत्वपूर्ण है।

मुझे इसे मुख्य कार्यक्षमता के हिस्से के रूप में देखना अच्छा लगेगा!

इस पर कोई प्रगति? ऐसा कोई तरीका नहीं है कि यह इच्छित व्यवहार है। गैर-200 स्टेटस कोड के साथ क्लाइंट को ग्राफक्यूएल त्रुटियों को और कैसे अग्रेषित किया जा सकता है?

नेटवर्क त्रुटियों को पकड़ने और संशोधित करने के साथ समस्या में चल रहे किसी और के लिए बस एक नोट। मैं ग्राफिकल से आंतरिक त्रुटि के लिए नेटवर्क त्रुटियों को खोलने की कोशिश कर रहा था और यहां मैं इसके साथ समाप्त हुआ:

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,
]);

अनिवार्य रूप से मैं उस संदेश को प्रतिस्थापित करता हूं जो पहले आंतरिक त्रुटि संदेश के साथ एक सामान्य नेटवर्क त्रुटि संदेश है। मेरे जैसे कुछ लोगों की मदद कर सकते हैं जो यहां समाप्त हो गए।