Using the MSGraphClient in SPFx to return blob images

In SharePoint Framework version 1.4, they introduced the new MSGraphClient, which makes your live a lot easier when you need to call the Microsoft Graph. For reference sake, getting access to the MSGraphClient can be done as follows.

import { WebPartContext } from '@microsoft/sp-webpart-base';
import { MSGraphClient } from '@microsoft/sp-client-preview';
export class DataService implements IDataService {
  private msGraphClient: MSGraphClient;

  constructor(private context: WebPartContext) {
    this.msGraphClient = context.serviceScope.consume(MSGraphClient.serviceKey);
  }
}

When you need to call the Microsoft Graph, but the result is not a json object, but an image. Then you probably want the result as a blob. This can be achieved by using the responseType method as follows.

public GetImage(id: string): Promise<string> {
  return this.msGraphClient
    .api(`/users/${id}/photos/48x48/$value`)
    .responseType('blob')
    .get()
    .then((blob: Blob) => {
      return blob ? URL.createObjectURL(blob) : null;
    });
}