React-Native アプリで Apollo (Graph Cool を使用)、redux、および Auth0 を使用しています。ヘッダーが設定されるまで、クエリとミューテーションを遅らせようとしています。
idToken は Async Storage に格納されるため、promise です。redux を使用してトークンを渡すことはできません。循環依存関係が作成されるためです。
ユーザーが初めてログインするか、トークンの有効期限が切れている場合、ヘッダーが設定される前にクエリが送信されるため、エラーが発生しますError: GraphQL error: Insufficient Permissions
トークンが見つかってヘッダーに追加されるまで、クエリを遅らせるにはどうすればよいですか? 私は3つの主な解決策を探してきました:
- forceFetch: true; を追加します。これは、Apollo クライアントの以前の実装の一部のようです。同等のものを見つけたとしても、アプリは最初のフェッチ試行で失敗します。
- ログイン時にストアをリセットします(水分補給?)。これはまだ非同期であるため、これが結果にどのように影響するかわかりません。
- ログイン自体からすべてのミューテーションとクエリを削除しますが、アプリの進行状況により、これは実行できません。
いくつかのスニペット:
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),
)
);