如何使用基于承诺的环境设置 Relay Modern？（例如 Auth0 或其他异步身份验证服务？）

Question

在 Relay Classic 中，我们只是将一个函数传递给 react-relay-network-layer 以 return 承诺中所需的令牌。 Relay Modern 中的等价物是什么？

理想情况下，我希望在环境承诺解决之前显示加载屏幕，然后在我们拥有环境并获取查询后显示主要组件。

所以如果我知道如何换掉 QueryRenderer 的环境，那也可以解决问题。

Answer 1

recommended method here 是在 fetchQuery 中获取身份验证令牌。

剩下的挑战是如何确保只调用一次异步身份验证功能，即使在身份验证仍在进行时中继多次获取也是如此。我们使用单例承诺来做到这一点；每次调用 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);
  }
}

如何使用基于承诺的环境设置 Relay Modern？（例如 Auth0 或其他异步身份验证服务？）

How to set up Relay Modern with a Promise-based Environment? (e.g. Auth0 or another async authentication service?)

promise

jwt

auth0

react-native

relayjs

如何使用基于承诺的环境设置 Relay Modern？ （例如 Auth0 或其他异步身份验证服务？）

How to set up Relay Modern with a Promise-based Environment? (e.g. Auth0 or another async authentication service?)

promise

jwt

auth0

react-native

relayjs

如何使用基于承诺的环境设置 Relay Modern？（例如 Auth0 或其他异步身份验证服务？）