<p>apollo-link-error-トークンを非同期で更新する方法は？</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

さらに詳しく調べると、上記のコードを使用すると、ApolloリンクのonErrorが2回呼び出されることがわかります。 refresh token約束を一度実行するように制限しても、エラーは修正されません。

何が起こるか：

1）初期クエリが実行されます
2）失敗し、apolloのリンクを実行しますonError
3）?? apolloのリンクonError再度実行します
4） onErrorトークンを更新することを約束し、実行を終了して解決します。
5）（Promiseが成功した後、最初のクエリは2回実行されません）
6）最初のクエリは、未定義としてdataを含む結果を返します

これは、誰かがこれに対する解決策を見つけることを期待するためです。そうでない場合は、有効期限が切れたときに更新するのではなく、長期間有効なアクセストークンの使用に戻す必要があります。

トークン取得ロジックが正しい場合、 onErrorは1回だけ呼び出す必要があります。 トークンクエリに問題があるようです

@thymikeeダミーのpromiseを使用して非同期リクエストを切り替えました。 それでも上記のメッセージで失敗し、最初のクエリは2回実行されません。 すべてのトークンはテスト時に有効です。

コード：

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は、ApolloLinkオブジェクトを推測してのみ使用できます。

解決策を研究していると、私はついにこのプロジェクトに出くわしました： apollo-link-token-refresh

私のアポロリンクスタックは次のようになりました。

[
   refreshTokenLink,
   requestLink,
   batchHttpLink
]

refreshTokenLinkは、graphqlエンドポイントへの応答を実行する前に、アクセストークンをチェックするために常に呼び出され、チャームのように機能します。

残念ながら、これは、graphqlエンドポイントへの呼び出しが常に認証されている必要があることを前提としています（私の場合は認証されています）。

onErrorコールバックがaync関数を受け入れないか、 Promiseが返されるようです。 コードhttps://github.com/apollographql/apollo-link/blob/59abe7064004b600c848ee7c7e4a97acf5d230c2/packages/apollo-link-error/src/index.ts#L60-L74を参照して

この問題は以前に報告されました：＃190

apollo-link-retryがここで行うのと同様に、 apollo-link-errorがPromiseを処理できれば、よりうまくいくと思います：＃436

同じ問題があり、react nativeでapolloを使用すると、AsyncStorage onErrorからトークンを削除する必要があるため、非同期関数である必要があります

このソリューションは私のために働いた： https ：

ユーティリティ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;
}

つまり、代わりにundefinedを返すのが安全です。 プロジェクトのREADMEファイルに記載する必要があると思います。

UPD：これに関するPRを追加しました： https ：

この問題はGoogleで上位にランクされているので、ここで解決策を共有して、一部の人々を支援します： //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'

更新された後、新しい認証トークンをどのように保存しますか？

もちろん、再試行リクエストに新しいヘッダーを設定することはできますが、元のアクセストークン（Cookieに保存している）は更新されません。つまり、サーバーへのすべてのリクエストで古いアクセストークンが使用されます（その後、もう一度更新する必要があります）。

何らかの理由で、更新中にCookieを更新しようとすると、次のエラーメッセージが表示されます（ここで新しい問題を作成しました）。

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に感謝します。 私はあなたの解決策を試しましたが、まだ問題があります。新しいトークンがリクエストに設定される前に、graphqlリクエストにトークンを追加するミドルウェアが呼び出されます。 したがって、ヘッダーにはまだ無効なトークンがあります。

少し背景情報：トークンが無効な場合、ネットワークエラーが発生し、更新トークンを介して、新しいトークンを取得して再試行できます。 ただし、更新トークンが収集されてローカルストレージに設定される前にミドルウェアが呼び出されるため、ミドルウェアにはまだ無効なトークンがあります。 最後に新しいトークンセットを取得するため、トークンの更新ロジックは正常に機能します。 問題を少しデバッグしました。タイミングは次のとおりです。

• ミドルウェア：無効なトークンが添付されています
• クエリのリクエストが行われます
• ネットワークエラー：401は、トークンが無効であるためにキャッチされ、 onErrorで、 promiseToObservableロジックを介して処理され、再試行されます。
• onRefreshToken約束でトークンの取得が完了するまで、ミドルウェアはすでに古いトークンで2回目の実行になっています。
• トークンはローカルストレージで更新されます...

これらの部分のスニペットは次のとおりです（onRefreshtokenをスキップします。これは非同期関数であり、Promiseを返します）。

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

ここで欠けているものを教えてください。 よろしくお願いします...

OK、混乱があればごめんなさい...

私は答えを見つけました、そしてそれは何時間もそれを探してそして-もちろん-ここに投稿した後に見つけた後の愚かなものです：アポロクライアントの初期化中に、私はミドルウェアとエラーリンクを交換しました。 今では動作します。 明らかに、エラーリンクが最初である必要があります。
古い： link: from([authMiddleware, errorLink, /* others */])
新規： link: from([errorLink, authMiddleware, /* others */])

またすみません..

こんにちはみんな、

更新トークンにonErrorを使用すると、次の問題が発生します。 nextjsを使用したSSRの目的で、すべてのgraphqlクエリからデータを収集していますが、たとえば2つのクエリがあり、jwtトークンの有効期限が切れているため、それぞれがエラーになるとどうなりますか。 次に、onErrorを2回起動し、高価な更新トークンを2回呼び出します。 問題がどこから来ているのかわかりません。 これが私が使用しているコードです。 これを手伝ってくれませんか。

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

私はこの問題に少し取り組みましたが、ようやく機能するようになりました。 私は一緒にパッケージを投げました。

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

このパッケージとapollo-link-token-refreshと呼ばれるパッケージの主な違いは、このパッケージはネットワークエラーを待ってから更新を試みることです。

変更のアイデアがあれば教えてください。

基本的な使用法は次のとおりです。

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 "apollo-angular-link-http": "^1.6.0",にあり、apollo-client "apollo-link-http": "^1.5.16", "apollo-angular-link-http": "^1.6.0",ありませんが、link-errorは同じ"apollo-link-error": "^1.1.12",

別の構文：eyes：

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

こんにちは！ フルWebSocketトランスポートを使用しているので、トークンクエリをリクエストする必要があります。 それを行う方法がわかりません。
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あなたは書かれたサービスコードを提供できますか

'services / auth-service'からAuthServiceをインポートします//これは私の実装です
const {token} = await AuthService.getCredentials（）;

サービスをインポートしようとするとエラーが発生します

これが私のサービスです。react-nativeからAsyncStorageを読み取るだけなので、ログイン後に値を設定し、各リクエストの前にコードで情報を取得してヘッダーに設定します。同じことを行うか、localStorageを使用します。ウェブ上にあります。

使いたい情報はどこに保存していますか？

あなたはこれを使うことができます

//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説明に感謝しますが、Angularを使用していますgrapqh.module.tsファイルにサービスをインポートできませんサービスを使用しているときにエラーが発生します

クラスとコンストラクターを使用せずにmodule.tsファイルでサービスを使用する方法を誰もが知ることができます

ありがとう

トークンの非同期更新にfromPromiseを使用しようとしています。
基本的に、この投稿の3番目のボックスに続きます

トークンの取得と保存に成功しましたが、 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のcheckSessionなど）の場合、GraphQLリクエストごとに不要なAuth0サーバーのラウンドトリップが発生します。

トークンの非同期更新にfromPromiseを使用しようとしています。
基本的に、この投稿の3番目のボックスに続きます

トークンの取得と保存に成功しましたが、 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

@ WilsonLau0755 、私は同じ問題を抱えていました。 すべてのnullヘッダーを空の文字列''設定することで解決しました。

onErrorがasyncawaitで使用できるだけではないのはなぜですか？