React apolloのリクエストごとにエラーを処理します

Question

すべてのエラーをキャッチするミドルウェアを作成するにはどうすればいいですか？たとえば、必要なトークン、トークンが期限切れまたは破損しているという要求があります。クエリーおよび突然変異。

例： 有効期限が切れたトークンでは、トークンを再取得し、要求を繰り返す必要があります。 トークンが破損した場合、ユーザーをログアウトしてすべてのクエリを再取得する必要があります。 そして、私が扱う必要があるエラー魔法のタイプは多くあります。 （反応-アポロドキュメント）で

networkInterface.useAfter([{ 
    applyAfterware({ response }, next) { 
    if (response.status === 401) { 
     logout(); 
    } 
    next(); 
    } 
}]); 

私はgraphqlエラーにアクセスし、クエリまたは変異を呼び出すことはできません。

Answer 1

すべてのリクエストが送信される前にトークンがあるかどうかを確認することができます。トークンを持っていない場合は、アプリケーション内のどこかでトークンを処理するか、ミドルウェア関数からまっすぐに別のトークンを取得する必要があります。トークンを必要とするすべてのコンポーネントをラップする上位コンポーネントを作成することができます。なんらかの理由でトークンがない場合、ブラウザを使用している場合は別のものをフェッチしてlocalStorageに格納し、React Nativeを使用している場合はasyncstorageに格納できます。これをlocalStorageまたはasyncStorageに割り当てたら、以下のミドルウェアのコードスニペットは、送信するすべてのリクエストの前にトークンをチェックします。これにはすべてのクエリと突然変異が含まれます。ユーザーがトークンを持っていないことがわかった場合は、それらのトークンをコンポーネントにリダイレクトして、再度ログインする必要のあるページにリダイレクトしてから、そこからトークンをlocalstorageまたはasynstorageに設定することもできます。もう一度apolloクライアントのミドルウェアがそのようにアクセスします。

import ApolloClient, { createNetworkInterface } from 'apollo-client'; 
import { checkForSessionToken } from '../../utils/authentication'; 

const networkInterface = createNetworkInterface({ 
    uri: 'https://localhost:4000' 
}); 

networkInterface.use([{ 
    applyMiddleware(req, next) { 
    // Create the header object if needed. 
    if (!req.options.headers) { 
     req.options.headers = {}; 
    } 

    // get the authentication token from Async storage 
    // and assign it to the request object 
    checkForSessionToken() 
    .then(SESSION_TOKEN => { 
     if (SESSION_TOKEN === null || SESSION_TOKEN === undefined { 
      fetchNewToken() 
      .then(SESSION_TOKEN => { 
       localStorage.setItem('token', SESSION_TOKEN); 
       req.options.headers.Authorization = `Bearer 
       ${SESSION_TOKEN}`; 
      } 
     } else { 
     req.options.headers.Authorization = `Bearer ${SESSION_TOKEN}`; 
     } 

     next(); 
    }) 
    .catch(error => { 
     fetchNewToken() 
     .then(SESSION_TOKEN => { 
      localStorage.setItem('token', token); 
      req.options.headers.Authorization = `Bearer 
      ${SESSION_TOKEN}`; 
     } 

     next(); 
    }) 
    } 
}]); 

const client = new ApolloClient({ 
    networkInterface, 
    dataIdFromObject: o => o.id 
}); 

export default client;