Step 3 - consume the mock data in the web part

Now, open your web part TypeScript file and insert the following import statements at the beginning section of the file before the web part class definition.

import { Environment, EnvironmentType } from '@microsoft/sp-core-library'; 
import { ISPListItem } from "./ISPListItem"; 
import MockSharePointClient from "./MockSharePointClient"; 

The first line imports Environment and EnvironmentType from sp-core-library; we use these to find out if we are running from a local Workbench and thus need to use mock data.

Inside the web part class definition, insert the following functions.

private _getMockListData(): Promise<ISPListItem[]> { 
  return MockSharePointClient.get("") 
    .then((data: ISPListItem[]) => { 
          return data; 
      }); 
} 
 
private _getListItems(): Promise<ISPListItem[]> { 
  if (Environment.type === EnvironmentType.Local) { 
    return this._getMockListData(); ...