GraphQL için Doku API'sine uygulama bağlama

Bir uygulamayı GraphQL api'sine bağlamak için üç temel ayrıntıya ihtiyacınız vardır: İstemci Kimliği, Kiracı Kimliğiniz ve Doku'daki GraphQL uç nokta adresiniz . Aşağıdaki bölümlerde, örnek bir React uygulaması kullanarak gerekli ayrıntıları oluşturma ve alma ve API'nize erişme işlemleri açıklanmaktadır.

Diğer diller

Bu öğreticide, React örnek uygulamasını GraphQL için Doku API'sine bağlama açıklanmaktadır. C#, Python ve diğer dil örneklerini Microsoft Fabric Örnekleri GitHub deposunda bulabilirsiniz.

Önkoşullar

Bir uygulamayı bağlamadan önce, Doku'da GraphQL için bir API'niz olduğundan emin olun. Daha fazla bilgi için bkz . Dokuda GraphQL için API oluşturma ve veri ekleme.
GraphQL API'sinin, uygulamaların kimlik doğrulaması için Microsoft Entra kullanmasını gerektirir. Uygulamanızı Doku'ya karşı API çağrıları gerçekleştirecek şekilde kaydedin ve yapılandırın. Daha fazla bilgi için bkz . Azure'da Microsoft Entra uygulaması oluşturma.
API'yi çağıran kimliği doğrulanmış kimlik bilgisi (kullanıcı sorumlusu, hizmet sorumlusu veya yönetilen kimlik) GraphQL API'sinde Yürütme izinleri gerekir (Doğrudan erişim izinleri eklerken Sorguları ve Mutasyonları Çalıştır seçeneği). API'de bağlantı seçeneği olarak çoklu oturum açma (SSO) kullanıyorsanız, kimlik bilgilerinin seçilen veri kaynağında okuma veya yazma izinlerine sahip olduğundan emin olun. Daha fazla bilgi için bkz. Veri kaynağına bağlanma veşemanızı oluşturma.

Microsoft Entra uygulaması oluşturma

Aşağıdaki adımlarda, Microsoft Entra'da ReactJS uygulaması desteğini yapılandırma adımları açıklanmaktadır.

Hızlı Başlangıç:Microsoft kimlik platformuna uygulama kaydetme başlığı altında açıklanan adımları kullanarak bir uygulamayı kaydetme.
Özet kutusunda Microsoft Entra uygulaması Uygulaması (istemci) Kimliği ve Dizin (kiracı) Kimliği değerleri görüntülenir. Bu değerleri daha sonra gerekli olduğundan kaydedin.
Yönet listesinin altında, API izinleriniseçin, ardından "İzin ekle"'yi seçin.
PowerBI Hizmetini ekleyin, Temsilci izinleri'ni seçin ve GraphQLApi.Execute.All izinleri'ni seçin. Yönetici onayının gerekli olmadığını onaylayın.
Yönet listesine dönün, Kimlik Doğrulaması>Platform> ekleTek sayfalı uygulama'yı seçin.
Yerel geliştirme amacıyla Yeniden Yönlendirme URI'leri bölümüne ekleyin http://localhost:3000 ve uygulamanın Kod Değişimi için Proof Key (PKCE) ile yetkilendirme kodu akışı için etkinleştirildiğini onaylayın. Değişikliklerinizi kaydetmek için Yapılandır düğmesini seçin. Uygulama çıkış noktaları arası isteklerle ilgili bir hatayla karşılaşırsa, önceki adımda aynı yeniden yönlendirme URI'sine sahip Mobil ve masaüstü uygulamaları platformunu ekleyin.
Kimlik Doğrulaması'ne dönün, ekranı aşağı kaydırarak gelişmiş ayarlar gidin ve genel istemci akışlarına izin veraltında için Evet'i seçinaşağıdaki mobil ve masaüstü akışlarını etkinleştirin.

Uygulama erişimi için örnek bir GraphQL API'sini ayarlama

Bu örnekte örnek Lakehouse verilerini istemcilere göstermek için bir GraphQL API'sini oluşturacağız.

Doku portalı giriş sayfasında, iş yükleri listesinden Veri Madenciliği seçin.
Veri Mühendisliği deneyiminde Örnek kullan'ı seçin ve Lakehouse'un altında Resmi tatiller'i seçerek resmi tatil verileriyle otomatik olarak yeni bir Lakehouse oluşturun.
Yeni bir GraphQL API'sini oluşturmak ve oluşturduğunuz Lakehouse'u seçmek için GraphQL için API oluşturma adımlarını izleyin. İstemcilerin bu verilere erişebilmesi için resmi tatiller tablosunu ekleyin.

Aşağıdaki örnek sorguyu kullanarak GraphQL API'sini API düzenleyicisinde test edin. React istemci uygulamasında kullanılan sorguyla aynıdır:

 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 öğesinin araç çubuğunda Uç noktayı kopyala'yı seçin.
Bağlantıyı kopyala ekranında Kopyala'yı seçin.
Daha önce kaydedilen Microsoft Entra uygulamasından İstemci Kimliği ve Kiracı Kimliği'ni kullanın ve daha sonra gerekli olduğundan uç nokta URI'sini kopyalayın.

Resmi tatiller API'sine erişmek için React uygulaması yapılandırma

Uyarı

Aşağıdaki el ile gerçekleştirilen adımları atlamayı tercih ederseniz GitHub deposunu uygulamanın tamamıyla kopyalayabilirsiniz. GraphQL uç noktanız ve Microsoft Entra'dan alınan kimliklerinizle ilgili belirli ayrıntıları dosyanıza authConfig.js eklemek için 3. adımı izleyin, bağımlılıkları npm install ile yükleyin ve uygulamanın çalıştırılmasını test etmek için 9. adıma atlayın.

Başlangıç noktası olarak mevcut react uygulamasını kullanın. Tek sayfalı React uygulaması oluşturma öğreticisindeki adımları izleyin ve proje yapısına eklenen gerekli dosya ve klasörler de dahil olmak üzere Microsoft Entra kimlik doğrulaması yapılandırılmış bir React projesi oluşturmak için bunu kimlik doğrulamasına hazırlayın. Uygulamayı GraphQL kullanım örneğine uyarlamak için üç dosyayı değiştirin.

src klasöründe dosyasını açın authConfig.js ve dosyanın içeriğini aşağıdaki kod parçacığıyla değiştirin:

/*
 * 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: 
 * [OpenID Connect scopes](/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",
};

Yukarıdaki kodda da görebileceğiniz gibi uygulamaya erişmek için doğru kapsamın kullanılması önemlidir. Bizim durumumuzda https://analysis.windows.net/powerbi/api/GraphQLApi.Execute.All.

Aşağıdaki değerleri Microsoft Entra yönetim merkezindeki değerlerle değiştirin.
- clientId - İstemci olarak da adlandırılan uygulamanın tanımlayıcısı. değerini, kayıtlı Microsoft Entra uygulamasının genel bakış sayfasından daha önce kaydedilen Enter_the_Application_Id_Here değeriyle değiştirin.
- authority - Bu iki bölümden oluşur:
  - Örnek, bulut sağlayıcısının uç noktasıdır. Ulusal bulutlardaki farklı kullanılabilir uç noktaları denetleyin.
  - Kiracı Kimliği, uygulamanın kayıtlı olduğu kiracının tanımlayıcısıdır. Enter_the_Tenant_Info_Here öğesini, kayıtlı uygulamanın genel bakış sayfasından daha önce kaydedilen Dizin (kiracı) kimliği değeriyle değiştirin.
- graphQLEndpoint - GraphQL uç noktası için Doku API'si. değerini daha önce kaydedilen GraphQL API uç noktasıyla değiştirin Enter_the_GraphQL_Endpoint_Here .
Dosyayı kaydedin.

Aynı src klasörde dosyayı açın App.js ve dosyanın içeriğini aşağıdaki kod parçacığıyla değiştirin:

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>
  );
}

Dosyayı kaydedin.

Son olarak, klasörün altında src/components dosyayı açın ProfileData.jsx ve dosyanın içeriğini aşağıdaki kod parçacığıyla değiştirin:

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>CountryOrRegion</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>
)};

Tüm dosya değişikliklerini kaydedin.
Terminal uygulamanızda React projesinin kök klasörüne gidin ve uygulamayı yerel olarak test etmek için komutunu npm start çalıştırın.
Uygulama tarayıcınıza uygulamasından http://localhost:3000yüklendikten sonra, öğreticinin son bölümünde yer alan api'yi uygulamadan çağırma adımlarını izleyin.
Oturum açtıktan sonra GraphQL Verileri için Query Fabric API'sini seçin.
Dokudaki GraphQL API'sine yapılan başarılı bir kimliği doğrulanmış istek, GraphQL sorgusundan React istemci uygulamasındaki Lakehouse'a veri döndürür:

Azure'da Microsoft Entra uygulaması oluşturmayı öğrenin.
Doku'da GraphQL için API oluşturmayı ve veri eklemeyi öğrenin.
React tek sayfalı bir uygulama oluşturmayı ve bunu kimlik doğrulaması için hazırlamayı öğrenin.
GraphQL için Doku API'sinde birden çok veri kaynağını sorgulamayı öğrenin.
Örnek React uygulamasıyla GitHub deposunu keşfedin.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-08-22