api-client-sdk-integration-nodejs.md

API Client SDK Integration

You can create a client SDK from APIs registered on API Center using Visual Studio Code. This section will guide you through the integration process.

To use this feature, you need to install the API Center extension in Visual Studio Code. In addition to that, you may be asked to install the Microsoft Kiota extension.

1. Open the API Center extension, navigate down to the API definition, and right-mouse click on the API definition. Then choose the "Generate API Client" option.

   

2. When the pop-up modal appears, click the "Open" button.

   

3. When the Kiota extension opens, make sure that everything is selected and click the ▶️ button to generate an API client.

   

4. The prompt asks several questions in the order. Enter the following values:

   1. Choose a name for the client class 👉 WeatherClient
   2. Choose a name for the client class namespace 👉 WebApp.ApiClients
   3. Enter an output path relative to the root of the project 👉 nodejs/webapp/src/ApiClients
   4. Pick a language 👉 TypeScript - preview

5. After the client is generated, you can see the client class in the specified output path.

   

Run the WebApp

1. While in the root of the project, run the following command to install the required packages and run the web application.

   cd nodejs/webapp && npm install && npm start

2. On localhost:3000, you will see the following UI, but when you navigate to the Weather page, you only see an empty table with no weather data.

   

3. Let's make a small modification to the code to make the client SDK work. Open src/components/WeatherList.js and uncomment all the commented out code.

Note

This code sets up an anonymous authentication provider and a fetch request adapter to create a weather client. The getWeatherForecast function uses the client to fetch weather data from the API.

1. Refresh localhost:3000 to load the weather data from your API in your web application.

2. Open the browser and navigate to https://localhost:3000.

3. You can see a table with weather forecast data from the WeatherForecast API.

   

Note

In case you run into the error below, navigate to webapp/src/weatherClient.ts, locate line import { type WeatherforecastRequestBuilder, WeatherforecastRequestBuilderRequestsMetadata } from './weatherforecast/index.ts'; and change /index.js to index.ts