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

Question

In Relay Classic, we would just pass a function to react-relay-network-layer to return the required token in a promise. What's the equivalent in Relay Modern?

Ideally I'd like to display the Loading screen until the Environment promise resolves, and then display the main Component once we have an Environment and the query is fetched.

So if I knew how to swap out QueryRenderer's environment, that would also solve the issue.

Answer 1

The recommended method here is to fetch the authentication token inside of fetchQuery.

The remaining challenge is how to make sure the async authentication function is called only once, even if Relay fetches multiple times while authentication is still ongoing. We did this using a singleton promise; each call to fetchQuery calls the static Promise.resolve() method on the same promise, so that once the authentication call finishes, all fetchQuery calls continue with the desired authentication information.

So fetchQuery gets an auth token (JWT) with:

const authToken = await AuthToken.get();

And AuthToken looks like (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);
  }
}