Expand Minimize

Don't use HttpClient to connect to SharePoint

Don't use HttpClient to connect to SharePoint. Use the SPHttpClient instead

CheckId SPF010802
TypeName DontUseHttpClientToConnectToSharePoint
Severity CriticalError
Type JavaScriptFile

When communicating with SharePoint use the instance SPHttpClient instead of HttpClient. HttpClient is meant to be used for issuing requests to non-SharePoint endpoints. When using HttpClient with SharePoint, it doesn't include authentication cookie and as a result the call will fail.

Good practice

import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export interface IOrder {
  Title: string,
  Id: number;
}

export interface IOrderItem {
  Title: string;
  OrderId: number;
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  private loadOrders(): Promise<IOrder[]> {
    return new Promise<IOrder[]>((resolve: (orders: IOrder[]) => void, reject: (error: any) => void): void => {
      this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getByTitle('Orders')/items?$select=Title,OrderId&$top=10`, SPHttpClient.configurations.v1)
        .then((response: SPHttpClientResponse): Promise<IOrderItem[]> => {
          if (response.ok) {
            return response.json();
          }
          else {
            reject(response.statusText);
          }
        })
        .then((orderItems: IOrderItem[]): void => {
          resolve(orderItems.map((orderItem: IOrderItem): IOrder => {
            return {
              Id: orderItem.OrderId,
              Title: orderItem.Title
            }
          }));
        })
        .catch((error: any): void => {
          reject(error);
        });
    });
  }
}


Bad practice
import { HttpClient, HttpClientResponse } from '@microsoft/sp-http';

export interface IOrder {
  Title: string,
  Id: number;
}

export interface IOrderItem {
  Title: string;
  OrderId: number;
}

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {
  private loadOrders(): Promise<IOrder[]> {
    return new Promise<IOrder[]>((resolve: (orders: IOrder[]) => void, reject: (error: any) => void): void => {
      this.context.httpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getByTitle('Orders')/items?$select=Title,OrderId&$top=10`, HttpClient.configurations.v1)
        .then((response: HttpClientResponse): Promise<IOrderItem[]> => {
          if (response.ok) {
            return response.json();
          }
          else {
            reject(response.statusText);
          }
        })
        .then((orderItems: IOrderItem[]): void => {
          resolve(orderItems.map((orderItem: IOrderItem): IOrder => {
            return {
              Id: orderItem.OrderId,
              Title: orderItem.Title
            }
          }));
        })
        .catch((error: any): void => {
          reject(error);
        });
    });
  }
}

Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.