Query Fabric Semantic Models from React Web Applications
This video walks through the process of integrating a Microsoft Fabric Semantic Model query into a custom web application built with React and TypeScript, covering authorization, token fetching, and querying semantic models using the Power BI REST API. Viewers will learn how to add necessary permissions, fetch access tokens, and implement code within their React app to submit queries and display results.
Description
This video walks through integrations configures and coding to add a Microsoft Fabric Semantic Model query to a custom web app built with React and Typescript.
Companion Post: https://robkerr.ai/query-fabric-semantic-models-react
Previous post covering Entra/React Integration:
https://robkerr.ai/implement-entra-authentication-react-webapp/
Topics Covered:
1. Adding Power BI API Permissions to an existing App Registration. This authorizes a web app to query Semantic Models using the end-user's access token.
2. Fetch a Power BI/Fabric Access Token. Correct access tokens in the Authorization header is a key element of a successful integration.
3. Add Semantic Model Query Code to a React App. This tutorial demonstrates the use of the Power BI REST API to query semantic models.
4. Submit Queries and Display Results. Finally, we'll test the implementation by submitting a test query to a Fabric Workspace.
GitHub Repo:
https://github.com/robkerr/azure-msal-react-tutorial
0:00 Introduction
0:49 Semantic Model
1:08 Dataset Id Lookup
1:29 App Registration
1:47 API Permissions
2:11 React App Test
3:04 Add UI Components
3:38 Access Token
4:32 REST Call
6:00 App Test
6:18 Summary