Query Fabric Semantic Models from React Web Applications
In this video, we'll walk through how to integrate a Microsoft Fabric Semantic Model query into a custom React web app. We'll cover everything from setting up the necessary API permissions and fetching the correct access token to adding the actual query code and displaying the results. By the end, we'll have tested the implementation so you can see how to submit queries and render the data directly in your UI.
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