Visual Studio Code'da GraphQL uygulamaları geliştirme

React, Apollo İstemcisi ve TypeScript ile Microsoft Fabric'te barındırılan bir GraphQL API'siyle tümleşen bir ön uç uygulaması oluşturmayı öğrenin. Bu öğretici, en iyi geliştirici deneyimi için otomatik tamamlama, kod oluşturma ve IntelliSense gibi yerel geliştirme araçlarını ayarlamayı kapsar.

VS Code geliştirme araçlarını kimler kullanmalıdır?

VS Code ile yerel geliştirme, şu özellikler için tasarlanmıştır:

GraphQL aracılığıyla Fabric lakehouse ve ambar verilerini kullanan web uygulamaları oluşturan React geliştiricileri
Fabric GraphQL API'leri için tür açısından güvenli istemci kodu oluşturması gereken TypeScript geliştiricileri
Yerel IDE desteğiyle Doku platformunun üzerinde özel analiz uygulamaları oluşturan tam yığın geliştiricileri
IntelliSense ve hata ayıklama ile modern araçlar isteyen geliştirme ekipleri için Fabric veri erişim uygulamaları

TypeScript ve Apollo İstemcisi ile zengin IDE desteği, kod oluşturma ve yerel hata ayıklama özelliklerine ihtiyaç duyan React uygulamaları oluştururken bu yaklaşımı kullanın.

Önkoşullar

Başlamadan önce şunların olduğundan emin olun:

Microsoft Fabric çalışma alanına erişim: GraphQL API öğelerini oluşturmak ve değiştirmek için en az Katkıda Bulunan (veya daha yüksek: Yönetici, Üye) rolüne sahip Microsoft Fabric çalışma alanının bir üyesi olun.
Veri kaynağı izinleri: GraphQL API aracılığıyla kullanıma sunmayı planladığınız veri kaynakları üzerinde okuma/yazma izinleri
Geliştirme makinenizde yüklü Node.js (npm içerir)
Geliştirme makinenizde yüklü Visual Studio Code
React, TypeScript ve GraphQL kavramları hakkında temel bilgiler

1. Adım: Microsoft Fabric'te GraphQL API'sini oluşturma

Uyarı

Bu kılavuzda SQL veritabanı bağlamından GraphQL API'sini oluşturma gösterilmektedir. Önce SQL veritabanını oluşturursunuz, ardından GraphQL API'sini doğrudan bu veritabanının içinden oluşturursunuz. Zaten bir GraphQL API'niz varsa ve buna bağlanmak istiyorsanız, API'yi ilk olarak oluşturduğunuz ve ardından bir SQL veritabanına veya başka bir veri kaynağına bağlandığınız Kullanmaya başlama kılavuzunu izleyin.

SQL veritabanı oluşturma

GraphQL API'niz için örnek veriler içeren bir SQL veritabanı oluşturmak için:

Doku çalışma alanınızda Yeni Öğe'yi seçin.
SQL veritabanı (önizleme) öğesini seçin.
Veritabanınız için bir ad girin.
Otomatik olarak tablo oluşturmak ve bunları örnek verilerle doldurmak için Örnek veriler'i seçin. Bu, SalesLT.Customer, SalesLT.Product ve SalesLT.SalesOrderHeader gibi tablolar da dahil olmak üzere SalesLT şemasıyla AdventureWorksLT örnek veritabanını oluşturur.

Tavsiye

Önceki bir öğreticiden veya GraphQL API'sinden alınan örnek verileri içeren bir SQL veritabanınız zaten varsa, aynı veritabanını yeniden kullanabilirsiniz. Tek bir veritabanı birden çok GraphQL API'sini destekleyebilir, bu nedenle SalesLT şemasına sahip bir veritabanınız varsa yeni bir veritabanı oluşturmanız gerekmez.

GraphQL API'sini oluşturma

Örnek verileri içeren bir SQL veritabanınız olduğuna göre GraphQL API'sini oluşturun:

SQL veritabanınızda şeritten GraphQL için Yeni API'yi seçin.
API'niz için bir ad belirtin.
Veritabanınızdan tüm SalesLT tablolarını seçin.
API'yi oluşturmak için Yükle'yi seçin.

GraphQL API'niz artık hazır ve Doku çalışma alanınızda kullanılabilir.

2. Adım: Geliştirme ortamınızı ayarlama

Bu öğreticiyi takip etmek için React starter uygulamasını ayarlamak, gerekli bağımlılıkları yüklemek ve GraphQL desteğiyle Visual Studio Code'u yapılandırmak için bu adımları tamamlayın.

Başlangıç uygulamasını kopyalama - Microsoft Fabric örnekleri deposundan React başlangıç uygulamasını alın:

git clone https://github.com/microsoft/fabric-samples.git
cd fabric-samples/docs-samples/data-engineering/GraphQL/React-Apollo-TS

Bağımlılıkları yükleme - GraphQL geliştirme, otomatik tamamlama ve kod oluşturma için gerekli paketleri yükleyin:
```
npm install
```
Gerekli Visual Studio Code uzantısını yükleme - Söz dizimi vurgulamayı, doğrulamayı ve GraphQL işlemleri için IntelliSense'i etkinleştirmek için Visual Studio Code'da GraphQL : Dil Özelliği Desteği uzantısını yükleyin.

3. Adım: GraphQL şemanızı yapılandırma

GraphQL şeması API'nizin yapısını tanımlar. Hangi verilerin kullanılabilir olduğunu, hangi işlemleri gerçekleştirebileceğinizi ve farklı veri türleri arasındaki ilişkileri tanımlar. Geliştirme araçlarınız IntelliSense, kod tamamlama ve tür oluşturma sağlamak için bu şemayı kullanarak doğru GraphQL sorgularını ve mutasyonlarını yazmayı çok daha kolay hale getirir.

GraphQL şemanızı iki şekilde edinebilirsiniz:

1. Seçenek: Şemayı statik dosya olarak dışarı aktarma

Doku GraphQL API'nizde şeritten Şemayı Dışarı Aktar'ı seçin.
İndirilen dosya adı GraphQL API'nizin kimliğini içerir (örneğin, GraphQL_your-api-id_schema.graphql). Bunu proje kök dizininize kaydedin ve olarak yeniden adlandırın schema.graphql . Bu, izleyen yapılandırma adımlarında kullandığınız dosya adıdır.

Seçenek 2: Uzak uç noktayı kullanma

Doku Portalı'nda oluşturduğunuz GraphQL API'sine erişin.
Get-PowerBIAccessToken ile PowerShell kullanarak yetkilendirme belirteci alma

Uyarı

Uzak uç nokta seçeneği her zaman en güncel şemayı sağlar, ancak alınan jeton geçicidir ve süresi her saat sona erer. Bunlar yalnızca test ve geliştirme amacıyla kullanılmalıdır ve mümkün olduğunda belirteç süre sonuyla ilgili sorunları önlemek için statik bir dosya kullanın.

4. Adım: IntelliSense ve otomatik tamamlama yapılandırma

Şimdi 3. Adımdaki şemayı kullanarak IntelliSense'i ayarlayacaksınız. Şema dosyası (statik veya uzak uç noktadan) SIZ GraphQL sorguları yazarken VS Code'un gerçek zamanlı kod önerileri, hata algılama ve alan doğrulaması sağlamasına olanak tanır.

Proje kökünde bir yapılandırma dosyası oluşturun:

Statik şema dosyasını kullanma

Şemayı statik dosya olarak dışarı aktardıysanız aşağıdaki yapılandırmayı kullanın:

Oluşturma .graphqlrc.yml:

schema: './schema.graphql'
documents: 'src/**/*.{ts,tsx,graphql,gql}'

Uzak uç noktayı kullanma

Şemayı doğrudan GraphQL API uç noktanızdan getirmeyi tercih ediyorsanız aşağıdaki yapılandırmayı kullanın:

Oluşturma graphql.config.yml:

schema:
  - https://your-graphql-endpoint.com/graphql:
      headers:
        Authorization: Bearer YOUR_ACCESS_TOKEN
documents: src/**/*.{ts,tsx,graphql,gql}

Yapılandırma seçenekleri

şema: GraphQL şemanızın konumunu belirtir
belgeler: Hangi dosyaların IntelliSense desteğine sahip olması gerektiğini tanımlar

Yapılandırma dosyasını oluşturduktan sonra, değişikliklerin etkili olduğundan emin olmak için Visual Studio Code'ı yeniden başlatın.

5. Adım: Kod oluşturmayı ayarlama

GraphQL kod oluşturma, şemanızdan ve işlemlerinizden otomatik olarak türlenmiş TypeScript arabirimleri ve React kancaları oluşturarak hataları azaltır ve geliştirme verimliliğini artırır. Birincil amacı, özellikle TypeScript gibi kesin olarak belirlenmiş dillerle çalışırken GraphQL projelerinde tür güvenliğini geliştirmek ve geliştirmeyi kolaylaştırmaktır.

Codegen yapılandırması oluşturma

Statik dosya seçeneği

Şemayı statik dosya olarak dışarı aktardıysanız proje kökünde oluşturuncodegen.yml:

schema: './schema.graphql'
documents: './src/**/*.graphql'
generates:
  src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHooks: true

Uzak uç nokta seçeneği

Uzak uç nokta yaklaşımını kullanıyorsanız proje kökünde oluşturuncodegen.yml:

schema:
  - https://your-graphql-endpoint.com/graphql:
      headers:
        Authorization: Bearer YOUR_ACCESS_TOKEN
documents: 'src/**/*.{ts,tsx,graphql,gql}'
generates:
  src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHooks: true

Yapılandırma dökümü

schema: Şema dosyanızın veya uzak uç noktanızın yolu
belgeler: GraphQL işlem dosyalarını bulmak için glob deseni
oluşturur: Oluşturulan kod için çıkış dosyasını belirtir
eklentiler: Oluşturulacak kodu belirler (TypeScript türleri ve React Apollo kancaları)

Codegen betiği ekleme

Kod oluşturma betiğini proje dizininizdeki dosyaya package.json ekleyin (bu dosya , 2. Adımda depoyu kopyaladığınızda eklenmiştir):

{
  "scripts": {
    "codegen": "graphql-codegen --config codegen.yml"
  }
}

6. Adım: GraphQL işlemleri yazma

Sorgularınızı ve mutasyonlarınızı tanımlamak için dizininizde .graphql dosyalar oluşturunsrc/operations. IntelliSense otomatik tamamlama ve doğrulama sağlar.

Örnek sorgular

Aşağıdaki sorguları oluşturun src/operations/queries.graphql ve girin:

Müşteri verilerini almak için örnek bir sorgu aşağıda verilmişti:

query GET_CUSTOMERS(
  $after: String
  $first: Int
  $filter: CustomerFilterInput
  $orderBy: CustomerOrderByInput
) {
  customers(after: $after, first: $first, filter: $filter, orderBy: $orderBy) {
    items {
      CustomerID
      FirstName
      LastName
    }
  }
}

İşte bir mutasyon örneği:

mutation ADD_CUSTOMER($input: CreateCustomerInput!) {
  createCustomer(item: $input) {
    CustomerID
    FirstName
    LastName
    Title
    Phone
    PasswordHash
    PasswordSalt
    rowguid
    ModifiedDate
    NameStyle
  }
}

7. Adım: Türler ve kancalar oluşturma

TypeScript türleri ve React kancaları oluşturmak için kod oluşturma komutunu çalıştırın:

npm run codegen

Başarıyla tamamlandıktan sonra, şunları içeren kodu src/generated/graphql.tsx oluşturacaksınız:

Tüm GraphQL türleri için TypeScript arabirimleri
Her işlem için kesin olarak türlenmiş React kancaları
Giriş ve çıkış türü tanımları

8. Adım: React bileşenlerinizde oluşturulan kodu kullanma

Oluşturulan kancaları React bileşenlerinizde içeri aktarın ve kullanın, örneğin:

import React from 'react';
import { useGetCustomersQuery, useAddCustomerMutation } from '../generated/graphql';

const CustomersComponent: React.FC = () => {
  const { data, loading, error } = useGetCustomersQuery({
    variables: { first: 10 }
  });

  const [addCustomer] = useAddCustomerMutation();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data?.customers?.items?.map(customer => (
        <div key={customer.CustomerID}>
          {customer.FirstName} {customer.LastName}
        </div>
      ))}
    </div>
  );
};

export default CustomersComponent;

9. Adım: Kimlik doğrulamayı yapılandırma

Uygulamanız için Microsoft Entra Id kimlik doğrulamasını yapılandırın:

GraphQL için Uygulamaları Doku API'sine bağlama bölümündeki Microsoft Entra uygulaması oluşturma bölümünden sonra bir Microsoft Entra uygulaması oluşturun.
authConfig.ts Projenizdeki dosyayı gerekli parametrelerle güncelleştirin:

export const AUTH_CONFIG = {
    clientId: "<Enter_the_Application_Id_Here>",
    tenantId: "<Enter_the_Tenant_Id_Here>",
    clientSecret: "<Enter_the_Client_Secret_Here>", //optional
}
export const GRAPHQL_ENDPOINT = '<Enter_the_GraphQL_Endpoint_Here>';

// The scope required for Fabric GraphQL API access
export const DEFAULT_SCOPE = "https://analysis.windows.net/powerbi/api/.default";

Yapılandırma dosyasının tamamı için depodaki authConfig.ts örneğine bakın.

10. Adım: Uygulamanızı çalıştırma

Geliştirme sunucunuzu başlatın:

npm run dev

Uygulamanız konumundaki http://localhost:3000tarayıcıda başlatılır. GraphQL API verilerine erişmek için Microsoft kimlik bilgilerinizle oturum açmanız istenir. Kimlik doğrulaması başarılı olduktan sonra, React uygulamasında Doku SQL veritabanınızın SalesLT.Customer tablosundaki müşteri verilerini görürsünüz.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-01-21