如何在基于承诺的环境中设置现代中继?(例如 Auth0 或其他异步身份验证服务?

Question

在 Relay Classic 中，我们只需将一个函数传递给 react-relay-network-layer 以在 promise 中返回所需的令牌。 《现代接力》中的等价物是什么？

理想情况下，我想显示加载屏幕，直到环境承诺得到解决，然后在我们有一个环境并获取查询后显示主组件。

因此，如果我知道如何交换QueryRenderer的环境，那也将解决问题。

Answer 1

这里推荐的方法是在 fetchQuery 中获取身份验证令牌。

剩下的挑战是如何确保异步身份验证函数只调用一次，即使 Relay 在身份验证仍在进行时多次获取。 我们使用单例承诺来做到这一点;每次对 fetchQuery 的调用都会对同一个承诺调用静态 Promise.resolve(( 方法，因此一旦身份验证调用完成，所有 fetchQuery 调用都会继续使用所需的身份验证信息。

因此，fetchQuery通过以下方式获得身份验证令牌 (JWT(：

const authToken = await AuthToken.get();

AuthToken看起来像(TypeScript(：

class AuthToken {
  private static _accessTokenPromise: Promise<string>;
  public static async get() {
    if (!this._accessTokenPromise)
      this._accessTokenPromise = this.AuthFunction(); // AuthFunction returns a promise
    return await Promise.resolve(this._accessTokenPromise);
  }
}