2

React-Native アプリで Apollo (Graph Cool を使用)、redux、および Auth0 を使用しています。ヘッダーが設定されるまで、クエリとミューテーションを遅らせようとしています。

idToken は Async Storage に格納されるため、promise です。redux を使用してトークンを渡すことはできません。循環依存関係が作成されるためです。

ユーザーが初めてログインするか、トークンの有効期限が切れている場合、ヘッダーが設定される前にクエリが送信されるため、エラーが発生しますError: GraphQL error: Insufficient Permissionsここに画像の説明を入力

トークンが見つかってヘッダーに追加されるまで、クエリを遅らせるにはどうすればよいですか? 私は3つの主な解決策を探してきました:

  1. forceFetch: true; を追加します。これは、Apollo クライアントの以前の実装の一部のようです。同等のものを見つけたとしても、アプリは最初のフェッチ試行で失敗します。
  2. ログイン時にストアをリセットします(水分補給?)。これはまだ非同期であるため、これが結果にどのように影響するかわかりません。
  3. ログイン自体からすべてのミューテーションとクエリを削除しますが、アプリの進行状況により、これは実行できません。

いくつかのスニペット:

const token = AsyncStorage.getItem('token');
const networkInterface = createNetworkInterface({ uri:XXXX})

//adds the token in the header
networkInterface.use([{
    applyMiddleware(req, next) {
        if(!req.options.headers) {
            req.options.headers = {}
        }
        if(token) {
            token
                .then(myToken => {
                    req.options.headers.authorization = `Bearer ${myToken}`;
                })
                .catch(err => console.log(err));   
        }
        next(); // middleware so needs to allow the endpoint functions to run;
    },
}]);

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

const store = createStore(
  combineReducers({
    token: tokenReducer,
    profile: profileReducer,
    path: pathReducer,
    apollo: client.reducer(),
  }),
  {}, // initial state
  compose(
      applyMiddleware(thunk, client.middleware(), logger),
  )
);
4

1 に答える 1