Create client instance for reuse

Question

I was trying to set up an instance of client so I don't have to write this.context.msGraphClientFactory.getClient().then((client: MSGraphClient) every time I want to make a request.

Something which translates to what they set up here in step 2 : https://github.com/microsoftgraph/msgraph-sdk-javascript

I've tried doing at as below in my WebParts.ts file, but I don't get it to work;

import { MSGraphClient } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types'; //Can't find module

export interface IGraphConsumerWebPartProps {
  description: string;
}

export default class GraphConsumerWebPart extends BaseClientSideWebPart<IGraphConsumerWebPartProps> {

  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';
  private graphClient: MSGraphClient;
  private _clientInstance: any;

  // My attempt to create a client instance on init for the lifecycle of the class
  protected onInit(): Promise<void> {
    //return new Promise<void>((environvars) => {
    //this._environmentMessage = this._getEnvironmentMessage();
    this._clientInstance = this._getClientInstance();
    //});
    return this._clientInstance;
    
  }

  public render(): void {
    const element: React.ReactElement<IGraphConsumerProps> = React.createElement(
      GraphConsumer,
      {
        clientMode: this.properties.clientMode,
        context: this.context,
        description: this.properties.description,
        isDarkTheme: this._isDarkTheme,
        environmentMessage: this._environmentMessage,
        hasTeamsContext: !!this.context.sdks.microsoftTeams,
        userDisplayName: this.context.pageContext.user.displayName
      }
    );
    

    // This successfully runs and logs the user
    this.context.msGraphClientFactory.getClient().then((client: MSGraphClient): void => {
      // get information about the current user from the Microsoft Graph
      client.api('/me').get((error, user: any, rawResponse?:any)=> {
        console.log("user is working");
        console.log(user);

        
        // get information about the current user from the Microsoft Graph
      });
    });
    console.log(this._clientInstance)
    console.log("testing");

    // This fails
    this._clientInstance.then((client: MSGraphClient): void => {
      // get information about the current user from the Microsoft Graph
      client.api('/me').get((error, user: any, rawResponse?:any)=> {
        console.log("user is cool");
        console.log(user);

      });
    });
    
    ReactDom.render(element, this.domElement);
  }

  // How I try to create the client instance
  private _getClientInstance(): Promise<void>{    
    return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
      this.context.msGraphClientFactory.getClient().then(
          (client: MSGraphClient): void => {
            this.graphClient = client;
            resolve();
          }, err => reject(err));
    });
  }