Wie richte ich Relay Modern mit einer Promise-basierten Umgebung ein? (z.B. Auth0 oder ein anderer asynchroner Authentifizierungsdienst?)

Question

In Relay Classic würden wir einfach eine Funktion an react-relay-network-layer übergeben, um das erforderliche Token in einem Versprechen zurückzugeben. Was ist das Äquivalent in Relay Modern?

Idealerweise möchte ich den Ladebildschirm anzeigen, bis das Environment-Versprechen verrechnet wird, und dann die Hauptkomponente anzeigen, sobald wir eine Umgebung haben und die Abfrage abgerufen wird.

Wenn ich wusste, wie man die Umgebung von QueryRenderer austauscht, würde das auch das Problem lösen.

Answer 1

Die recommended method here ist das Abrufen des Authentifizierungstokens in FetchQuery.

Die verbleibende Herausforderung besteht darin, sicherzustellen, dass die asynchrone Authentifizierungsfunktion nur einmal aufgerufen wird, auch wenn Relay mehrere Male abruft, während die Authentifizierung noch läuft. Wir haben das mit einem Singleton-Versprechen gemacht; Bei jedem Aufruf von fetchQuery wird die statische Promise.resolve() -Methode mit derselben Verheißung aufgerufen, sodass alle fetchQuery-Aufrufe nach Abschluss des Authentifizierungsaufrufs mit den gewünschten Authentifizierungsinformationen fortgesetzt werden.

So fetchQuery bekommt ein Auth-Token (JWT) mit:

const authToken = await AuthToken.get(); 

Und authToken sieht aus wie (Typoskript):

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); 
    } 
}