<p>अपोलो-लिंक-त्रुटि - कैसे async टोकन रीफ्रेश करने के लिए?</p>

यदि आप वादों से अधिक परिचित हैं, तो आप fromPromise सहायक का उपयोग कर सकते हैं

import { fromPromise } from 'apollo-link';

return fromPromise(refreshToken().then(token => {
  operation.setContext({
    headers: {
      ...oldHeaders,
      authorization: token,
    },
  });
  return forward(operation);
}))

@thymikee ने आपके समाधान की कोशिश की और यह निम्न संदेश के साथ विफल हो गया:

Uncaught (in promise) Error: Network error: Error writing result to store for query:
 query UserProfile($id: ID!) {
  UserProfile(id: $id) {
    id
    email
    first_name
    last_name
    activated
    created_at
    updated_at
    last_active
    roles {
      id
      name
      __typename
    }
    permissions {
      name
      value
      __typename
    }
    profile {
      address
      secondary_email
      phone {
        id
        number
        type {
          id
          name
          __typename
        }
        __typename
      }
      __typename
    }
    __typename
  }
}

Cannot read property 'UserProfile' of undefined
    at new ApolloError (ApolloError.js:43)
    at QueryManager.js:327
    at QueryManager.js:759
    at Array.forEach (<anonymous>)
    at QueryManager.js:758
    at Map.forEach (<anonymous>)
    at QueryManager.webpackJsonp../node_modules/apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (QueryManager.js:751)
    at QueryManager.js:254

आगे के निरीक्षण से पता चलता है कि उपरोक्त कोड का उपयोग करते समय अपोलो लिंक के onError को दो बार कॉल किया जाता है। यहां तक ​​कि refresh token को एक बार चलाने के वादे को सीमित करने से भी त्रुटि ठीक नहीं होती है।

क्या होता है:

1) प्रारंभिक क्वेरी निष्पादित की जाती है
2) यह विफल हो जाता है और अपोलो का लिंक onError चलाता है
3) ?? यह अपोलो का लिंक onError फिर से चलाता है
4) टोकन को रीफ्रेश करने का वादा, onError निष्पादन समाप्त होता है और हल हो जाता है।
5) (वादा सफल होने के बाद दूसरी बार प्रारंभिक क्वेरी निष्पादित नहीं की जाती है)
6) प्रारंभिक क्वेरी रिटर्न परिणाम जिसमें data अपरिभाषित है

यहां उम्मीद है कि किसी को इसका समाधान मिल जाएगा, अन्यथा हमें समाप्ति पर उन्हें रीफ्रेश करने के बजाय लंबे समय तक चलने वाले टोकन का उपयोग करना होगा।

यदि आपका टोकन पुनर्प्राप्ति तर्क सही है, तो onError को केवल एक बार कॉल किया जाना चाहिए। ऐसा लगता है कि आपको अपनी टोकन क्वेरी में समस्या है

@thymikee ने एक डमी वादे के साथ async अनुरोध को बंद कर दिया। उपरोक्त संदेश के साथ अभी भी विफल रहता है और प्रारंभिक क्वेरी दो बार नहीं चलती है। सभी टोकन परीक्षण के समय मान्य हैं।

कोड:

return fromPromise(
    new Promise((resolve) => {
        let headers = {
            //readd old headers
            ...operation.getContext().headers,
            //switch out old access token for new one
            authorization: `Bearer  mynewaccesstoken`,
        };
        operation.setContext({
            headers
        });
        return resolve(forward(operation));
    })
)

संपादित करें: fromPromise हटा दिया और यह सही ढंग से काम करता है। किसी तरह, लिंक स्टैक की प्रोसेसिंग परिणाम वापस करने से पहले समाप्त हो जाती है इसलिए forward(operation) निष्पादित नहीं होता है।

fromPromise कोड और प्रतिबद्ध #172 का विश्लेषण करने के बाद, fromPromise उपयोग केवल अपोलो लिंक ऑब्जेक्ट के साथ अनुमान में किया जा सकता है।

एक समाधान पर शोध करने पर, मैं अंत में इस परियोजना पर ठोकर खाई: अपोलो-लिंक-टोकन-रीफ्रेश

मेरा अपोलो लिंक स्टैक अब इस प्रकार है:

[
   refreshTokenLink,
   requestLink,
   batchHttpLink
]

refreshTokenLink को हमेशा ग्राफ़िकल एंडपॉइंट पर किसी भी प्रतिक्रिया को निष्पादित करने से पहले एक्सेस टोकन की जांच करने के लिए कहा जाता है और एक आकर्षण की तरह काम करता है।

दुर्भाग्य से, यह मानता है कि ग्राफ़िकल एंडपॉइंट पर कॉल हमेशा प्रमाणित होना चाहिए (जो कि मेरे मामले में है)।

ऐसा लगता है कि onError कॉलबैक aync फ़ंक्शन या Promise रिटर्न स्वीकार नहीं करता है। देखें कोड https://github.com/apollographql/apollo-link/blob/59abe7064004b600c848ee7c7e4a97acf5d230c2/packages/apollo-link-error/src/index.ts#L60 -L74

यह समस्या पहले बताई गई थी: #190

मुझे लगता है कि यह बेहतर काम करेगा यदि apollo-link-error Promise निपट सकता है, जैसा कि apollo-link-retry यहां करते हैं: #436

एक ही समस्या होने पर, प्रतिक्रिया मूल के साथ अपोलो का उपयोग करके मुझे AsyncStorage onError से कुछ टोकन निकालने की आवश्यकता है, इसलिए इसे एक async फ़ंक्शन होना चाहिए

इस समाधान ने मेरे लिए काम किया: https://stackoverflow.com/a/51321068/60223

मैंने इसे एक उपयोगिता बनाकर हल किया promiseToObservable.js :

import { Observable } from 'apollo-link';

export default promise =>
  new Observable((subscriber) => {
    promise.then(
      (value) => {
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      err => subscriber.error(err)
    );
    return subscriber; // this line can removed, as per next comment
  });

और फिर

import { onError } from 'apollo-link-error';
import promiseToObservable from './promiseToObservable';

export default (refreshToken: Function) =>
  onError(({
    forward,
    graphQLErrors,
    networkError = {},
    operation,
    // response,
  }) => {
    if (networkError.message === 'UNAUTHORIZED') { // or whatever you want to check
      // note: await refreshToken, then call its link middleware again!
      return promiseToObservable(refreshToken()).flatMap(() => forward(operation));
    }
  });

@crazy4groovy आपके उदाहरण के लिए धन्यवाद, यह वास्तव में मदद करता है। हालांकि, इसके साथ एक छोटी सी समस्या है: subscriber Observable टाइपिंग के अनुसार अमान्य वापसी मूल्य है: यह ZenObservable.SubscriptionObserver होना चाहिए:

export declare type Subscriber<T> = ZenObservable.Subscriber<T>;

export declare const Observable: {
    new <T>(subscriber: Subscriber<T>): Observable<T>;
};

export declare namespace ZenObservable {
    interface SubscriptionObserver<T> {
        closed: boolean;
        next(value: T): void;
        error(errorValue: any): void;
        complete(): void;
    }

    type Subscriber<T> = (observer: SubscriptionObserver<T>) => void | (() => void) | Subscription;
}

यानी इसके बजाय अपरिभाषित लौटना सुरक्षित है। मुझे लगता है कि प्रोजेक्ट की रीडमे फ़ाइल में इसका उल्लेख किया जाना चाहिए।

यूपीडी: मैंने इसके बारे में एक पीआर जोड़ा: https://github.com/apollographql/apolo-link/pull/825

यह समस्या Google पर उच्च रैंक पर है इसलिए मैं कुछ लोगों की सहायता के लिए अपना समाधान यहां साझा कर रहा हूं: https://gist.github.com/alfonmga/9602085094651c03cd2e270da9b2e3f7

मैंने आपके समाधान की कोशिश की है लेकिन मुझे नई समस्या का सामना करना पड़ रहा है:

Argument of type '(this: Observable<{}>, observer: Subscriber<{}>) => Observable<{}> | Promise<{}>' is not assignable to parameter of type '(this: Observable<{}>, subscriber: Subscriber<{}>) => TeardownLogic'.
  Type 'Observable<{}> | Promise<{}>' is not assignable to type 'TeardownLogic'.
    Type 'Observable<{}>' is not assignable to type 'TeardownLogic'.
      Property 'unsubscribe' is missing in type 'Observable<{}>' but required in type 'Unsubscribable'

ताज़ा होने के बाद आप लोग नए प्रमाणीकरण टोकन को कैसे संग्रहीत कर रहे हैं?

निश्चित रूप से, मैं पुनः प्रयास अनुरोध में नए शीर्षलेख सेट कर सकता हूं, हालांकि मूल पहुंच टोकन (जिसे मैं कुकीज़ में संग्रहीत कर रहा हूं) अपडेट नहीं होता है जिसका अर्थ है कि सर्वर से प्रत्येक अनुरोध पुराने एक्सेस टोकन (और बाद में) का उपयोग करेगा फिर से ताज़ा करने की आवश्यकता होगी)।

जब भी मैं रीफ्रेश के दौरान कुकीज़ को अपडेट करने का प्रयास करता हूं तो किसी कारण से मुझे निम्न त्रुटि संदेश मिल रहा है (मैंने इसके बारे में यहां एक नया मुद्दा बनाया है):

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:470:11)
    at setCookie (/root/SimplyTidyAdmin/node_modules/nookies/dist/index.js:98:17)
    at /root/SimplyTidyAdmin/.next/server/static/CAhshxrRWHVF6Gzbce~pU/pages/_app.js:1273:63
    at process._tickCallback (internal/process/next_tick.js:68:7)

@StupidSexyJake शायद यह आप में मदद मिलेगी https://stackoverflow.com/questions/55356736/change-apollo-client-options-for-jwt-token मैं कैसे टोकन अद्यतन करने के लिए पर एक समान मुद्दे में चलाने

नमस्ते, धन्यवाद @crazy4groovy। मैंने आपके समाधान की कोशिश की है लेकिन मुझे अभी भी समस्या हो रही है, कि मिडलवेयर जहां मैं ग्राफ़िकल अनुरोध में टोकन जोड़ता हूं, अनुरोध पर नया टोकन सेट होने से पहले कहा जाता है। इसलिए, हेडर में अभी भी अमान्य टोकन है।

थोड़ी पृष्ठभूमि की जानकारी: जब टोकन अमान्य होता है, तो हमें एक नेटवर्क त्रुटि मिलती है, और एक ताज़ा टोकन के माध्यम से, हम एक नया प्राप्त कर सकते हैं और पुनः प्रयास कर सकते हैं। लेकिन चूंकि रीफ्रेश टोकन इकट्ठा होने और स्थानीय स्टोरेज पर सेट होने से पहले मिडलवेयर को कॉल किया जाता है, फिर भी इसमें अमान्य है। रीफ्रेश टोकन लॉजिक ठीक काम करता है, क्योंकि हमें अंत में नया टोकन सेट मिलता है। मैंने इस मुद्दे को थोड़ा सा डिबग किया है और समय इस प्रकार है:

• मिडलवेयर: अमान्य टोकन संलग्न
• एक प्रश्न के लिए अनुरोध किया जाता है
• नेटवर्क त्रुटि: 401, क्योंकि टोकन अमान्य है, पकड़ा गया है और onError इसे promiseToObservable तर्क के माध्यम से नियंत्रित किया जाता है और पुनः प्रयास किया जाता है।
• जब तक हम onRefreshToken वादे में टोकन प्राप्त करना समाप्त नहीं कर लेते, तब तक मिडलवेयर पहले से ही पुराने टोकन के साथ दूसरे रन में है।
• टोकन स्थानीय भंडारण में अद्यतन किया जाता है...

यहां इन भागों का एक स्निपेट दिया गया है (रीफ्रेशटोकन पर छोड़ना। यह एक एसिंक फ़ंक्शन है, एक वादा लौटा रहा है):

  const promiseToObservable = (promise: Promise<any>) =>
    new Observable((subscriber: any) => {
      promise.then(
        value => {
          console.log(subscriber);
          if (subscriber.closed) return;
          subscriber.next(value);
          subscriber.complete();
        },
        err => subscriber.error(err)
      );
    });

  const authMiddleware = setContext((operation: GraphQLRequest) => {
    const token = localStorage.getItem('ca_token');
    return {
      headers: {
        ...(token && !isSkipHeader(operation)
          ? { authorization: `Bearer ${token}` }
          : {})
      }
    };
  });

const errorLink = onError(
    ({
      networkError,
      graphQLErrors,
      operation,
      forward
    }: ErrorResponse): any => {
      if (networkError) {
        switch (networkError.statusCode) {
          case 401:
            console.warn('Refreshing token and trying again');
            // await refreshToken, then call its link middleware again
            return promiseToObservable(onRefreshToken(client.mutate)).flatMap(() => forward(operation));
          default:
            // Handle all other errors here. Irrelevant here.
        }
      }
      if (graphQLErrors) {
         // Handle gql errors, irrelevant here.
      }
    }
  );

क्या आप कृपया मुझे बता सकते हैं कि मैं यहाँ क्या खो रहा हूँ? अग्रिम में बहुत बहुत धन्यवाद...

ठीक है, भ्रम के लिए खेद है, यदि कोई हो ...

मुझे उत्तर मिल गया है और यह घंटों तक खोजने और खोजने के बाद यह एक बेवकूफी है - निश्चित रूप से - यहां पोस्ट करने के बाद: अपोलो क्लाइंट के आरंभीकरण के दौरान, मैंने मिडलवेयर और त्रुटि लिंक को बदल दिया है। अब यह काम कर रहा है। त्रुटि लिंक पहले होना चाहिए, जाहिर है ..
पुराना: link: from([authMiddleware, errorLink, /* others */])
नया: link: from([errorLink, authMiddleware, /* others */])

दोबारा माफी चाहूंगा..

हैलो दोस्तों,

टोकन रीफ्रेश करने के लिए मुझे ऑनरर का उपयोग करने में निम्न समस्या है। नेक्स्टज का उपयोग करते हुए एसएसआर के उद्देश्य के लिए मैं सभी ग्राफ़िकल प्रश्नों से डेटा एकत्र कर रहा हूं, लेकिन क्या होता है जब हमारे पास उदाहरण के लिए 2 प्रश्न होते हैं और उनमें से प्रत्येक एक त्रुटि के साथ समाप्त होता है क्योंकि jwt टोकन समाप्त हो जाता है। फिर यह ऑनरर से दो बार फायर करता है और हम रीफ्रेश टोकन के लिए दो बार कॉल कर रहे हैं जो महंगा है। मैं यह नहीं समझ सकता कि समस्या कहाँ से आ सकती है। यहां वह कोड है जिसका मैं उपयोग कर रहा हूं। क्या आप कृपया इसमें मदद कर सकते हैं।

https://gist.github.com/shaxaaa/15817f1bcc7b479f3c541383d2e83650

मैं इस समस्या से थोड़ी देर के लिए कुश्ती लड़ी, लेकिन आखिरकार मुझे यह काम मिल गया। मैंने एक साथ एक पैकेज फेंका।

https://github.com/baleeds/apolo-link-refresh-token

इस पैकेज और अपोलो-लिंक-टोकन-रीफ्रेश नामक पैकेज के बीच प्राथमिक अंतर यह है कि यह पैकेज रीफ्रेश करने का प्रयास करने से पहले नेटवर्क त्रुटि की प्रतीक्षा करेगा।

मुझे बताएं कि क्या आप लोगों के पास बदलाव के लिए विचार हैं।

यहाँ मूल उपयोग है:

const refreshTokenLink = getRefreshTokenLink({
  authorizationHeaderKey: 'Authorization',
  fetchNewAccessToken,
  getAccessToken: () => localStorage.getItem('access_token'),
  getRefreshToken: () => localStorage.getItem('refresh_token'),
  isAccessTokenValid: accessToken => isTokenValid(accessToken),
  isUnauthenticatedError: graphQLError => {
    const { extensions } = graphQLError;
    if (
      extensions &&
      extensions.code &&
      extensions.code === 'UNAUTHENTICATED'
    ) {
      return true;
    }
    return false;
  },
});

मैंने इसे एक उपयोगिता बनाकर हल किया promiseToObservable.js :

import { Observable } from 'apollo-link';

export default promise =>
  new Observable((subscriber) => {
    promise.then(
      (value) => {
        if (subscriber.closed) return;
        subscriber.next(value);
        subscriber.complete();
      },
      err => subscriber.error(err)
    );
    return subscriber; // this line can removed, as per next comment
  });

और फिर

import { onError } from 'apollo-link-error';
import promiseToObservable from './promiseToObservable';

export default (refreshToken: Function) =>
  onError(({
    forward,
    graphQLErrors,
    networkError = {},
    operation,
    // response,
  }) => {
    if (networkError.message === 'UNAUTHORIZED') { // or whatever you want to check
      // note: await refreshToken, then call its link middleware again!
      return promiseToObservable(refreshToken()).flatMap(() => forward(operation));
    }
  });

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

return promiseToObservable(refreshToken()).flatMap((value) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      // re-add old headers
      // ...headers,
      Authorization: `JWT ${value.token}`
    }
  }));
  return forward(operation)
});

और यह काम करता है।
हालांकि, इसमें अभी भी एक समस्या है कि अगर मैं ...headers (मतलब पुराने हेडर को फिर से जोड़ना) जोड़ता हूं, तो फॉरवर्ड अनुरोध भेजे जाने से पहले कुछ गड़बड़ है:
ERROR Error: Network error: Cannot read property 'length' of null
मुझे लगता है कि ... शीर्षलेखों में प्राधिकरण नए प्राधिकरण के साथ संघर्ष कर सकता है।

उपरोक्त समस्या अपोलो-कोणीय "apollo-angular-link-http": "^1.6.0", और अपोलो-क्लाइंट में नहीं "apollo-link-http": "^1.5.16", जबकि लिंक-त्रुटि समान है "apollo-link-error": "^1.1.12",

एक और वाक्यविन्यास: आंखें:

import Vue from 'vue'
import { Observable } from 'apollo-link'
import { onError } from 'apollo-link-error'

const onGraphqlError = async ({ graphQLErrors = [], observer, operation, forward }) => {
  // here you could call the refresh query in case you receive an expired error
  for (let error of graphQLErrors)
    observer.next(forward(operation)) // this line would retry the operation
}

const onNetworkError = async ({ observer, networkError, operation, forward }) => { }

export const errorHandler = opt => new Observable(async observer => {
  try {
    const payload = { ...opt, observer }
    await Promise.all([onGraphqlError(payload), onNetworkError(payload)])
    if (observer.closed) return
    observer.complete()
  } catch (error) {
    observer.error(error)
  }
})

नमस्ते! मैं पूर्ण वेबसोकेट परिवहन का उपयोग कर रहा हूं, टोकन क्वेरी का अनुरोध करने की आवश्यकता है। यह कैसे करना है पता नहीं।
मैं एक अनुरोध प्राप्त करना चाहता हूं जब सर्वर जवाब देता है कि accessToken समाप्त हो गया है।

import { onError } from "apollo-link-error";

import gql from 'graphql-tag'

// Client: VUE APOLLO
const q = {
    query: gql`query token { token { accessToken } }`,
    manual: true,
    result({ data, loading }) {
        if (!loading) {
            console.log(data)
        }
    },
}

const link = onError(({ graphQLErrors, networkError, operation, response, forward }) => {

    if (networkError) {


        switch (networkError.message) {
            case 'accessTokenExpired':
                console.log('accessTokenExpired')
                return forward(q) // NOT WORKS, NEED HELP
            case 'unauthorized':
                return console.log('unauthorized')
            default:
                return forward(operation)
        }
    }

    return forward(operation)
})

export default link

@nikitamarcius हमने ऊपर वर्कअराउंड पोस्ट किए हैं,

मैं टोकन को अपडेट करने में असमर्थ हूं, क्या कोई कामकाजी उदाहरण प्रदान कर सकता है

@ Ramyapriya24 यहाँ वह कोड है जिसका मैं उपयोग कर रहा हूँ।

import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import { setContext } from '@apollo/link-context';
import AuthService from 'services/auth-service' // this is my implementation

const asyncAuthLink = setContext(async () => {
    // this is an async call, it will be done before each request
    const { token } = await AuthService.getCredentials();
    return {
      headers: {
        authorization: token
      },
    };
  },
);

const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
});

export const apolloClient = new ApolloClient({
  cache: new InMemoryCache(),
  link: asyncAuthLink.concat(httpLink),
});

@adrianolsk क्या आप

'सेवाओं/प्राधिकरण-सेवा' से AuthService आयात करें//यह मेरा कार्यान्वयन है
कॉन्स्ट {टोकन} = AuthService.getCredentials (); का इंतजार करें;

जब मैं सेवा आयात करने का प्रयास कर रहा हूं तो मुझे त्रुटियां मिल रही हैं

यह मेरी सेवा है, यह सिर्फ प्रतिक्रिया-मूल से AsyncStorage पढ़ता है, इसलिए लॉगिन के बाद मैंने वहां मूल्य निर्धारित किया है और प्रत्येक अनुरोध से पहले कोड केवल जानकारी को पकड़ता है और हेडर में सेट करता है, आप ऐसा ही कर सकते हैं, या स्थानीय स्टोरेज का उपयोग कर सकते हैं यदि आप वेब पर हैं।

आप वह जानकारी कहाँ संग्रहीत कर रहे हैं जिसका आप उपयोग करना चाहते हैं?

आप बस इसका इस्तेमाल कर सकते हैं

//save the token after login or when it refreshes
localStorage.setItem('token', yourToken);

और इसका उपयोग करें

const asyncAuthLink = setContext(() => {
    // grab token from localStorage
    const token = localStorage.getItem('token');
    return {
      headers: {
        authorization: token
      },
    };
  },
);

@adrianolsk स्पष्टीकरण के लिए धन्यवाद, लेकिन मैं कोणीय का उपयोग कर रहा हूं मैं grapqh.module.ts फ़ाइल में सेवा आयात करने में असमर्थ हूं जब मैं सेवा का उपयोग कर रहा हूं तो मुझे त्रुटियां मिल रही हैं

क्या कोई क्लास और कंस्ट्रक्टर का उपयोग किए बिना मॉड्यूल.टीएस फ़ाइल में सेवा का उपयोग करना जान सकता है

धन्यवाद

मैं टोकन रीफ्रेश करने के लिए fromPromise का उपयोग करने का प्रयास कर रहा हूं।
मूल रूप से इस पोस्ट के तीसरे बॉक्स का अनुसरण कर रहे हैं

मैं सफलतापूर्वक टोकन प्राप्त कर रहा हूं और संग्रहीत कर रहा हूं, लेकिन catch या filter या flatMap को भी कॉल नहीं किया जाता है। मुझे यकीन नहीं है कि इसे कैसे डिबग किया जाए, इसलिए कुछ सुझाव मददगार होंगे।

if (token && refreshToken) {
  return fromPromise(
    getNewToken(client)
      .then(({ data: { refreshToken } }) => {
        console.log("Promise data: ", refreshToken);
        localStorage.setItem("token", refreshToken.token);
        localStorage.setItem("refreshToken", refreshToken.refreshToken);
        return refreshToken.token;
      })
      .catch((error) => {
        // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
        console.log("Error after setting token: ", error);
        return;
      })
  )
    .filter((value) => {
      console.log("In filter: ", value);
      return Boolean(value);
    })
    .flatMap(() => {
      console.log("In flat map");
      // retry the request, returning the new observable
      return forward(operation);
    });
}

@adrianolsk : यह दृष्टिकोण हमेशा समाप्त होने से पहले ही टोकन को ताज़ा करने लगता है, जो कुछ प्रमाणीकरण सेवाओं (जैसे Auth0 का

मैं टोकन रीफ्रेश करने के लिए fromPromise का उपयोग करने का प्रयास कर रहा हूं।
मूल रूप से इस पोस्ट के तीसरे बॉक्स का अनुसरण कर रहे हैं

मैं सफलतापूर्वक टोकन प्राप्त कर रहा हूं और संग्रहीत कर रहा हूं, लेकिन catch या filter या flatMap को भी कॉल नहीं किया जाता है। मुझे यकीन नहीं है कि इसे कैसे डिबग किया जाए, इसलिए कुछ सुझाव मददगार होंगे।

if (token && refreshToken) {
  return fromPromise(
    getNewToken(client)
      .then(({ data: { refreshToken } }) => {
        console.log("Promise data: ", refreshToken);
        localStorage.setItem("token", refreshToken.token);
        localStorage.setItem("refreshToken", refreshToken.refreshToken);
        return refreshToken.token;
      })
      .catch((error) => {
        // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
        console.log("Error after setting token: ", error);
        return;
      })
  )
    .filter((value) => {
      console.log("In filter: ", value);
      return Boolean(value);
    })
    .flatMap(() => {
      console.log("In flat map");
      // retry the request, returning the new observable
      return forward(operation);
    });
}

मैंने पाया है कि त्रुटि का कारण क्या था। उपरोक्त कोड में नहीं देखा गया है, लेकिन मैंने प्रत्येक परिणामी त्रुटियों को मैप करने के लिए map फ़ंक्शन का उपयोग किया है। इसके कारण onError कुछ भी नहीं लौटा और ऑब्जर्वेबल को टोकन नवीनीकरण के लिए ऑपरेशन की सदस्यता नहीं मिली।

बहुत भ्रमित करने वाला और मुझे यह पता लगाने में इतना समय लगा। मेरी मदद करने के लिए ब्लॉग पोस्ट के लेखक को धन्यवाद।

ERROR Error: Network error: Cannot read property 'length' of null

@ विल्सनलाउ0755 , मुझे भी यही समस्या थी। सभी null शीर्षलेखों को एक खाली स्ट्रिंग '' सेट करके इसे हल किया।

onError केवल async प्रतीक्षा के साथ उपयोग करने के लिए उपलब्ध क्यों नहीं है?