Exercise 05: Build a Custom Graph Connector

Introduction

In this exercise, you’ll review the core components and architecture necessary for building a custom Microsoft Graph Connector.

By exploring the project structure and key code files, you’ll gain a deeper understanding of how to configure, create, and deploy a connector that integrates external data into Microsoft 365.

This walkthrough covers essential files, such as the configuration, connection creation, and schema definition, guiding you through each stage of the process.

Project structure

├── .devproxy
│   └── graph-connector-mocks.json
├── .gitignore
├── .vscode
│   ├── extensions.json
│   └── launch.json
├── README.md
├── devproxyrc.json
├── package.json
├── resultLayout.json
├── setup.ps1
├── setup.sh
├── src
│   ├── completeJobWithDelayMiddleware.ts
│   ├── config.ts
│   ├── createConnection.ts
│   ├── graphClient.ts
│   └── loadContent.ts
└── tsconfig.json

resultLayout.json

This file contains the result layout (Adaptive Card) for Microsoft Search.

setup.ps1 and setup.sh

These scripts create a new Microsoft Entra app registration using CLI for Microsoft 365. Both scripts invoke CLI using npx, so that you don’t need to manually install CLI for Microsoft 365 before you run these scripts.

src/completeJobWithDelayMiddleware.ts

This file contains the Microsoft Graph SDK Middleware to handle the long-running job of provisioning the connection’s schema. The middleware waits for the job to complete before continuing. It waits the recommended 60 seconds before checking the job status.

src/config.ts

This file contains the Graph connector configuration. You can define the schema for the external items, the URL to the item resolvers, and the connection name.

src/createConnection.ts

This file contains the code to create the external connection and provision the schema.

src/graphClient.ts

This file contains the Microsoft Graph SDK client instantiation code.

src/loadContent.ts

This file contains the code to load content to import. The code is organized following the Extract-Transform-Load (ETL) principle.

tscconfig.json

This file contains the TypeScript configuration for the project.