Consume External Api Call

  If you want to use TypeScript in SharePoint Framework (SPFx) to call an API, you can follow these steps:

Step 1: Set Up Your SharePoint Framework Project

Make sure you have Node.js and Yeoman installed. If not, you can install them using the following commands:

bash
npm install -g yo gulp

Then, create a new SharePoint Framework project using Yeoman generator:

bash
yo @microsoft/sharepoint

Choose the options according to your project requirements, and select 'TypeScript' as the framework.

Step 2: Create a TypeScript Service to Call API

Create a TypeScript service to handle API calls. For example, you can create a file ApiService.ts:

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

export default class ApiService {
  private _httpClient: HttpClient;

  constructor(private _context: any) {
    this._httpClient = this._context.httpClient;
  }

  public async getApiData(apiUrl: string): Promise<any> {
    const response: HttpClientResponse = await this._httpClient.get(apiUrl, HttpClient.configurations.v1);
    if (response.ok) {
      return await response.json();
    } else {
      throw new Error(`Error calling API: ${response.statusText}`);
    }
  }
}

Step 3: Use the Service in Your Web Part

In your web part file (e.g., MyWebPart.ts), import the ApiService and use it to fetch data from the API:

typescript
import { sp } from "@pnp/sp";
import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import { ApiConfig } from './ApiConfig'; // Assuming you have a config file with API URL
import ApiService from './ApiService';

export default class MyWebPartWebPart extends BaseClientSideWebPart<IMyWebPartWebPartProps> {
  private apiService: ApiService;

  protected onInit(): Promise<void> {
    return super.onInit().then(() => {
      sp.setup({
        spfxContext: this.context
      });

      this.apiService = new ApiService(this.context);
    });
  }

  public render(): void {
    this.apiService.getApiData(ApiConfig.apiUrl)
      .then(data => {
        // Handle API data here
        console.log(data);
      })
      .catch(error => {
        // Handle errors
        console.error(error);
      });
  }
}

Step 4: Configure API URL

In your project, create a configuration file (e.g., ApiConfig.ts) to store the API URL:

typescript
export const ApiConfig = {
  apiUrl: 'https://api.example.com/data' // Replace this with your API endpoint
};

Step 5: Build and Deploy Your SPFx Solution

Build your solution using the following command:

bash
gulp build

After building, bundle the solution:

bash
gulp bundle --ship

Package the solution:

bash
gulp package-solution --ship

Upload the .sppkg file to your SharePoint app catalog and add the web part to your site.

Now, your SharePoint Framework web part is set up to call an API using TypeScript. Make sure to handle API responses and errors appropriately in your application.

--------------------------------------------------------------------------------------------------

PNP/SP installation

>npm install @pnp/logging @pnp/sp --save

>npm install @pnp/sp @pnp/logging @pnp/common --save