Apollo 客户端延迟授权 Header

Question

我在 React-Native 应用程序中使用 Apollo（带有 Graph Cool）、redux 和 Auth0。我正在尝试延迟查询和更改，直到设置 header。

idToken 存储在异步存储中，因此是一个承诺。我不能使用 redux 来传递令牌，因为那样会产生循环依赖。

当用户第一次登录或令牌过期时，在设置header之前发送查询，这意味着我收到错误Error: GraphQL error: Insufficient Permissions

如何延迟查询直到找到令牌并将其添加到 header？我一直在寻找三个主要解决方案：

添加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),
  )
);

Answer 1

我不确定这是否可以在没有复制应用程序的情况下工作，主要是因为我没有设置你的结构的应用程序，但你遇到了这种竞争条件，因为你正在调用 next()你的异步链。

在当前位置调用 next() 将告诉客户端继续请求，即使您的令牌未设置。相反，让我们等到令牌返回并在继续之前设置 header。

networkInterface.use([{
  applyMiddleware(req, next) {
    if(!req.options.headers) {
      req.options.headers = {}
    }
    AsyncStorage.getItem('token')
      .then(myToken => {
         req.options.headers.authorization = `Bearer ${myToken}`;
      })
      .then(next)  // call next() after authorization header is set.
      .catch(err => console.log(err));   
  }
}]);

Apollo 客户端延迟授权 Header

Apollo Client Delaying the Authorization Header

react-native

redux

graphql

apollo

graphcool