GraphQL용 Fabric API에 애플리케이션 연결

2025-07-02

GraphQL용 API에 애플리케이션을 연결하려면 클라이언트 ID, 테넌트 ID 및 Fabric의 GraphQL 엔드포인트 주소라는 세 가지 중요한 정보가 필요합니다. 다음 섹션에서는 필요한 모든 세부 정보를 만들고 검색하는 방법과 샘플 React 애플리케이션을 사용하여 API에 액세스하는 방법을 보여 줍니다.

기타 언어

이 자습서에서는 React 샘플 애플리케이션을 GraphQL용 패브릭 API에 연결하는 방법을 단계별로 설명하지만 Microsoft Fabric 샘플 GitHub 리포지토리에서 C#, Python 및 기타 언어 샘플을 찾을 수 있습니다.

필수 조건

애플리케이션을 연결하기 전에 Fabric에서 GraphQL용 API가 있어야 합니다. 자세한 내용은 Fabric에서 GraphQL용 API 만들기 및 데이터 추가를 참조하세요.
현재, GraphQL용 API를 사용하려면 애플리케이션에서 인증에 Microsoft Entra를 사용해야 합니다. Fabric에 대한 API 호출을 수행하려면 애플리케이션을 등록하고 적절하게 구성해야 합니다. 자세한 내용은 Azure에서 Microsoft Entra 앱 만들기를 참조하세요.
API를 호출하는 인증된 자격 증명(사용자 주체, 서비스 주체 또는 관리 ID)에는 GraphQL API에 대한 실행 권한(직접 액세스 권한을 추가할 때 쿼리 및 변형 실행 옵션)이 필요하며, API에서 연결 옵션으로 SSO(Single Sign-On)를 사용하는 경우 그에 따라 선택한 데이터 원본에 읽기 또는 쓰기 권한이 필요합니다. 자세한 내용은 데이터 원본에 연결하고 스키마를 빌드하는 방법을 보려면 및을 참조하세요.

Microsoft Entra 앱 만들기

다음 단계에서는 Microsoft Entra에서 ReactJS 애플리케이션에 대한 지원을 구성하는 방법을 보여 줍니다.

빠른 시작에 설명된 단계를 사용하여 애플리케이션을 등록합니다. Microsoft ID 플랫폼애플리케이션을 등록합니다.
Microsoft Entra 앱 애플리케이션(클라이언트) ID 및 디렉터리(테넌트) ID 값이 요약 상자에 표시됩니다. 이러한 값은 나중에 필요하므로 기록합니다.
관리 목록에서 API 사용 권한을선택한 다음, 권한을 추가합니다.
PowerBI 서비스를 추가하고 위임된 권한을 선택한 다음 GraphQLApi.Execute.All 권한을 선택합니다. 관리자 동의가 필요하지 않은지 확인합니다.
관리 목록으로
로컬 개발 목적으로 리디렉션 URI 아래에 추가하고 http://localhost:3000 애플리케이션이 PKCE(코드 교환용 증명 키)를 사용하여 권한 부여 코드 흐름에 대해 사용하도록 설정되어 있는지 확인합니다. 구성 버튼을 선택하여 변경 내용을 저장합니다. 애플리케이션이 원본 간 요청과 관련된 오류를 수신하는 경우 이전 단계에서 동일한 리디렉션 URI를 사용하여 모바일 및 데스크톱 애플리케이션 플랫폼을 추가합니다.
인증돌아가서 고급 설정 아래로 스크롤하고, 공용 클라이언트 흐름 허용아래에서 다음 모바일 및 데스크톱 흐름사용하도록 예 선택합니다.

애플리케이션 액세스를 위한 샘플 GraphQL API 설정

이 예제에서는 샘플 레이크하우스 데이터를 클라이언트에 노출하는 GraphQL API를 만듭니다.

패브릭 포털 홈페이지의 워크로드 목록에서 데이터 엔지니어 선택합니다.
데이터 엔지니어링 환경에서 샘플 사용을 선택하고, 레이크하우스에서 공휴일을 선택하여 공휴일 데이터가 있는 새 레이크하우스를 자동으로 만듭니다.
GraphQL용 API 만들기의 단계에 따라 새 GraphQL API를 만들고 만든 레이크하우스를 선택합니다. 클라이언트가 이 데이터에 액세스할 수 있도록 공휴일 테이블을 추가합니다.

다음 샘플 쿼리를 사용하여 API 편집기에서 GraphQL API를 테스트합니다. React 클라이언트 애플리케이션에서 사용하는 것과 동일한 쿼리입니다.

 query {
   publicholidays (filter: {countryRegionCode: {eq:"US"}, date: {gte: "2024-01-01T00:00:00.000Z", lte: "2024-12-31T00:00:00.000Z"}}) {
     items {
       countryOrRegion
       holidayName
       date
     }
   }
 }

API 항목의 툴바에서 엔드포인트 복사를 선택합니다.
링크 복사 화면에서 복사를 선택합니다.
이전에 기록된 Microsoft Entra 앱의 클라이언트 ID 및 테넌트 ID로 나중에 필요하므로 엔드포인트 URI를 복사합니다.

공휴일 API에 액세스하도록 React 앱 구성

비고

다음 수동 단계를 건너뛰려면 전체 애플리케이션으로 GitHub 리포지토리 를 복제할 수 있습니다. 3단계에 따라 Microsoft Entra에서 검색된 GraphQL 엔드포인트 및 ID에 대한 세부 정보를 파일에 authConfig.js추가하고, 종속성을 설치하고, 9단계로 npm install 건너뛰어 애플리케이션 실행 테스트를 진행합니다.

기존 React 앱을 시작점으로 사용합니다. React 단일 페이지 애플리케이션 만들기 자습서 의 모든 단계에 따라 프로젝트 구조에 추가해야 하는 추가 파일 및 폴더를 포함하여 Microsoft Entra 인증이 이미 구성된 React 프로젝트를 만들기 위한 인증 을 준비합니다. GraphQL 사용 사례에 맞게 앱을 조정하려면 파일을 3개만 변경하면 됩니다.

폴더에서 src 파일을 열고 authConfig.js 파일 내용을 다음 코드 조각으로 바꿉니다.

 /*
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */

 import { LogLevel } from "@azure/msal-browser";

 /**
  * Configuration object to be passed to MSAL instance on creation. 
  * For a full list of MSAL.js configuration parameters, visit:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
  */

 export const graphqlConfig = {
     graphqlEndpoint: "`Enter_the_GraphQL_Endpoint_Here"
 };

 export const msalConfig = {
     auth: {
         clientId: "Enter_the_Application_Id_Here",
         authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here",
         redirectUri: "http://localhost:3000",
     },
     cache: {
         cacheLocation: "sessionStorage", // This configures where your cache will be stored
         storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
     },
     system: {	
         loggerOptions: {	
             loggerCallback: (level, message, containsPii) => {	
                 if (containsPii) {		
                     return;		
                 }		
                 switch (level) {
                     case LogLevel.Error:
                         console.error(message);
                         return;
                     case LogLevel.Info:
                         console.info(message);
                         return;
                     case LogLevel.Verbose:
                         console.debug(message);
                         return;
                     case LogLevel.Warning:
                         console.warn(message);
                         return;
                     default:
                         return;
                 }	
             }	
         }	
     }
 };

 /**
  * Scopes you add here will be prompted for user consent during sign-in. 
  * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
  * For more information about OIDC scopes, visit: 
  * https://docs.microsoft.com/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
  */
 export const loginRequest = {
     scopes: ["https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All"]
 };

 /**
  * Add here the scopes to request when obtaining an access token for MS Graph API. For more information, see:
  * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
  */
 export const graphConfig = {
     graphMeEndpoint: "https://graph.microsoft.com/v1.0/me",
 };

위의 코드에서 볼 수 있듯이 올바른 범위를 사용하여 애플리케이션에 액세스하는 것이 중요합니다. 우리의 경우 https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

다음 값을 Microsoft Entra 관리 센터의 값으로 바꿉니다.
- clientId - 클라이언트라고도 하는 애플리케이션의 식별자입니다. 등록된 Microsoft Entra 애플리케이션의 Enter_the_Application_Id_Here 값으로 바꿉 니다.
- authority - 이 작업은 다음 두 부분으로 구성됩니다.
  - 인스턴스는 클라우드 공급자의 엔드포인트입니다. 국가별 클라우드에서 사용 가능한 다양한 엔드포인트를 확인합니다.
  - 테넌트 ID는 애플리케이션이 등록된 테넌트 식별자입니다. 등록된 애플리케이션의 개요 페이지에서 이전에 기록된 디렉터리(테넌트) ID 값을 Enter_the_Tenant_Info_Here로 바꾸십시오.
- graphQLEndpoint - GraphQL 엔드포인트용 Fabric API입니다. Enter_the_GraphQL_Endpoint_Here를 이전에 기록된 GraphQL API 엔드포인트로 바꿉니다.
파일을 저장합니다.

동일한 src 폴더에서 파일을 열고 App.js 파일 내용을 다음 코드 조각으로 바꿉니다.

 import React, { useState } from 'react';
 import { PageLayout } from './components/PageLayout';
 import { loginRequest, graphqlConfig } from './authConfig';
 import { ProfileData } from './components/ProfileData';
 import { AuthenticatedTemplate, UnauthenticatedTemplate, useMsal } from '@azure/msal-react';
 import './App.css';
 import Button from 'react-bootstrap/Button';
 import Spinner from 'react-bootstrap/Spinner';

 /**
 * Renders information about the signed-in user or a button to retrieve data about the user
 */
 const ProfileContent = () => {
   const { instance, accounts } = useMsal();
   const [graphqlData, setGraphqlData] = useState(null);
   const [display, setDisplay] = useState(false);

   function RequestGraphQL() {
       // Silently acquires an access token which is then attached to a request for GraphQL data
       instance
           .acquireTokenSilent({
               ...loginRequest,
               account: accounts[0],
           })
           .then((response) => {
               callGraphQL(response.accessToken).then((response) => setGraphqlData(response));
           });
   }

 async function callGraphQL(accessToken) {
   setDisplay(true);
   const query = `query {
     publicholidays (filter: {countryRegionCode: {eq:"US"}, date: {gte: "2024-01-01T00:00:00.000Z", lte: "2024-12-31T00:00:00.000Z"}}) {
       items {
         countryOrRegion
         holidayName
         date
       }
     }
   }`;
   fetch(graphqlConfig.graphqlEndpoint, {
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
               'Authorization': `Bearer ${accessToken}`,
           },
           body: JSON.stringify({ 
               query: query
           })
       })
       .then((res) => res.json())
       .then((result) => setGraphqlData(result));
 }

   return (
       <>
           <h5 className="card-title">Welcome {accounts[0].name}</h5>
           <br/>
           {graphqlData ? (
               <ProfileData graphqlData={graphqlData} />
           ) : (
               <Button variant="primary" onClick={RequestGraphQL}>
                   Query Fabric API for GraphQL Data 
                   {display ? (
                         <Spinner
                             as="span"
                             animation="border"
                             size="sm"
                             role="status"
                             aria-hidden="true"
                         />
                     ) : null}
               </Button>
           )}
       </>
   );
 };

 /**
 * If a user is authenticated the ProfileContent component above is rendered. Otherwise a message indicating a user is not authenticated is rendered.
 */
 const MainContent = () => {
   return (
       <div className="App">
           <AuthenticatedTemplate>
               <ProfileContent />
           </AuthenticatedTemplate>

           <UnauthenticatedTemplate>
               <h5>
                   <center>
                       Please sign-in to see your profile information.
                   </center>
               </h5>
           </UnauthenticatedTemplate>
       </div>
   );
 };

 export default function App() {
   return (
       <PageLayout>
           <center>
               <MainContent />
           </center>
       </PageLayout>
   );
 }

파일을 저장합니다.

마지막으로 폴더 아래에서 src/components 파일을 열고 ProfileData.jsx 파일 내용을 다음 코드 조각으로 바꿉니다.

 import React from "react";
 import ListGroup from 'react-bootstrap/ListGroup'; 
 import Table from 'react-bootstrap/Table';
 /**
  * Renders information about the user obtained from MS Graph 
  * @param props
  */
 export const ProfileData = (props) => {
   const holidays = props.graphqlData.data.publicholidays.items;
   return (
     <Table striped bordered hover responsive>
     <thead>
       <tr>
         <th>Country</th>
         <th>Holiday</th>
         <th>Date</th>
       </tr>
     </thead>
     <tbody>
       {holidays.map((item,i) => (
       <tr key={i}>
         <td>{item.countryOrRegion}</td>
         <td>{item.holidayName}</td>
         <td>{item.date}</td>
       </tr>
       ))}
       </tbody>
     </Table>
 )};

모든 파일 변경 내용을 저장합니다.
선택한 터미널 애플리케이션에서 React 프로젝트의 루트 폴더로 이동하여 npm start 명령을 실행하여 애플리케이션을 로컬로 테스트합니다.
애플리케이션이 http://localhost:3000로부터 브라우저에서 로드되면 자습서 애플리케이션에서 API를 호출의 마지막 부분에서 설명하는 단계에 따라 인증합니다.
로그인한 후 GraphQL용 Fabric API 데이터 쿼리 버튼을 클릭합니다.
Fabric에서 GraphQL API에 대한 인증 요청에 성공하면 GraphQL 쿼리에서 React 클라이언트 애플리케이션의 레이크하우스로 데이터를 반환합니다.