Megosztás a következőn keresztül:

GraphQL-alkalmazások fejlesztése a Visual Studio Code-ban

Megtudhatja, hogyan hozhat létre egy előtérbeli alkalmazást a React, az Apolló ügyfél és a TypeScript használatával, amely a Microsoft Fabricben üzemeltetett GraphQL API-val integrálható. Ez az oktatóanyag bemutatja a helyi fejlesztési eszközök beállítását, beleértve az automatikus kiegészítést, a kódgenerálást és az IntelliSense-t az optimális fejlesztői élmény érdekében.

Ki használja a VS Code fejlesztői eszközeit?

A VS Code-ot tartalmazó helyi fejlesztés a következő célokra lett kialakítva:

  • A React fejlesztői olyan webalkalmazásokat fejlesztenek, amelyek Fabric lakehouse- és raktáradatokat használnak fel a GraphQL-en keresztül
  • TypeScript-fejlesztők , akiknek a Fabric GraphQL API-khoz típusbiztos ügyfélkód-létrehozásra van szükségük
  • Teljes körű fejlesztők egyéni elemzési alkalmazásokat építenek a Fabric platform tetején helyi IDE-támogatással
  • Fejlesztői csapatok, akik modern eszközöket szeretnének használni, beleértve az IntelliSense és a hibakeresést, a Fabric-adatelérési alkalmazásokhoz.

Ezt a megközelítést akkor használja, ha olyan React-alkalmazásokat készít, amelyek gazdag IDE-támogatást, kódgenerálást és helyi hibakeresési képességeket igényelnek a TypeScript és az Apolló ügyfél használatával.

Előfeltételek

Mielőtt hozzákezdene, győződjön meg arról, hogy:

  • Microsoft Fabric-munkaterület hozzáférése: A GraphQL API-elemek létrehozásához és módosításához legyen tagja a Fabric-munkaterületnek legalább közreműködői szerepkörrel (vagy magasabb szintű: Rendszergazda, Tag)
  • Adatforrás-engedélyek: Olvasási/írási engedélyek a GraphQL API-n keresztül elérhetővé tenni kívánt adatforrásokon
  • Node.js telepítve a fejlesztői gépen (az npm-et is beleértve)
  • A Visual Studio Code telepítve van a fejlesztői gépen
  • A React, TypeScript és GraphQL fogalmak alapszintű ismerete

1. lépés: GraphQL API létrehozása a Microsoft Fabricben

Megjegyzés:

Ez az útmutató bemutatja, hogyan hozhat létre GraphQL API-t sql-adatbázis-környezetből. Először az SQL-adatbázist hozza létre, majd közvetlenül az adatbázison belülről hozza létre a GraphQL API-t. Ha már rendelkezik egy meglévő GraphQL API-val, és csatlakozni szeretne hozzá, kövesse az első lépések útmutatót , amelyben először az API-t hozza létre, majd csatlakozzon egy SQL-adatbázishoz vagy más adatforráshoz.

SQL-adatbázis létrehozása

Mintaadatokat tartalmazó SQL-adatbázis létrehozása a GraphQL API-hoz:

  1. A saját Fabric munkaterületén válassza az Új elem-et.
  2. Válassza az SQL Database (előzetes verzió) lehetőséget.
  3. Adja meg az adatbázis nevét.
  4. A Mintaadatok lehetőséget választva automatikusan létrehozhat táblákat, és feltöltheti őket mintaadatokkal. Ez létrehozza az AdventureWorksLT mintaadatbázist a SalesLT-sémával, beleértve az olyan táblákat, mint a SalesLT.Customer, a SalesLT.Product és a SalesLT.SalesOrderHeader.

Jótanács

Ha már rendelkezik egy korábbi oktatóanyag vagy GraphQL API-létrehozás mintaadataival rendelkező SQL-adatbázissal, ugyanazt az adatbázist újra felhasználhatja. Egyetlen adatbázis több GraphQL API-t is támogathat, így nem kell új adatbázist létrehoznia, ha már rendelkezik SalesLT-sémával.

A GraphQL API létrehozása

Most, hogy már rendelkezik mintaadatokkal rendelkező SQL-adatbázissal, hozza létre a GraphQL API-t:

  1. Az SQL-adatbázisban válassza az Új API a GraphQL-hez lehetőséget a menüszalagon.

    Képernyőkép az SQL-adatbázis menüszalagjának Új API for GraphQL lehetőségéről.

  2. Adjon nevet az API-nak.

  3. Válassza ki az adatbázis összes SalesLT-tábláját .

  4. Válassza a Betöltés lehetőséget az API létrehozásához.

A GraphQL API készen áll és elérhető a Fabric-munkaterületen.

2. lépés: A fejlesztési környezet beállítása

Az oktatóanyagot követve hajtsa végre ezeket a lépéseket a React starter alkalmazás beállításához, a szükséges függőségek telepítéséhez és a Visual Studio Code GraphQL-támogatással való konfigurálásához.

  1. Klónozza a kezdőalkalmazást – A React starter alkalmazás lekérése a Microsoft Fabric-minták adattárából:

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

  2. Függőségek telepítése – Telepítse a GraphQL-fejlesztéshez, az automatikus kiegészítéshez és a kódgeneráláshoz szükséges csomagokat:

    npm install

  3. Telepítse a szükséges Visual Studio Code-bővítményt – Telepítse a GraphQL: Language Feature Support bővítményt a Visual Studio Code-ban, hogy engedélyezze a szintaxiskiemelést, -ellenőrzést és IntelliSense-t a GraphQL-műveletekhez.

3. lépés: A GraphQL-séma konfigurálása

A GraphQL-séma meghatározza az API struktúráját – milyen adatok érhetők el, milyen műveleteket hajthat végre, és milyen kapcsolatok vannak a különböző adattípusok között. A fejlesztői eszközök ezzel a sémával biztosítják az IntelliSense-t, a kódkiegészítést és a típusgenerálást, így sokkal könnyebben írhatnak helyes GraphQL-lekérdezéseket és -mutációkat.

A GraphQL-sémát kétféleképpen szerezheti be:

1. lehetőség: Séma exportálása statikus fájlként

  1. A Fabric GraphQL API-ban válassza a Séma exportálása lehetőséget a menüszalagról.
  2. A letöltött fájlnév tartalmazza a GraphQL API azonosítóját (például GraphQL_your-api-id_schema.graphql). Mentse a projekt gyökérkönyvtárába, és nevezze át schema.graphql erre a fájlnévre, amelyet a következő konfigurációs lépésekben használ.

2. lehetőség: Távoli végpont használata

  1. Hozzáférés a Háló portálon létrehozott GraphQL API-hoz.
  2. Engedélyezési jogkivonat beszerzése a PowerShell Get-PowerBIAccessToken parancsával

Megjegyzés:

Bár a távoli végpont beállítás mindig a legfrissebb sémát biztosítja, a kiváltott token ideiglenes, és óránként lejár. Ezeket csak tesztelési és fejlesztési célokra szabad használni, amikor csak lehetséges, használjon statikus fájlt a jogkivonatok lejáratával kapcsolatos problémák elkerülése érdekében.

4. lépés: Az IntelliSense és az automatikus kiegészítés konfigurálása

Most beállítja az IntelliSense-t a 3. lépés sémájának használatával. A sémafájl (akár statikus, akár távoli végpontról) lehetővé teszi, hogy a VS Code valós idejű kódjavaslatokat, hibaészlelést és mezőérvényesítést biztosítson GraphQL-lekérdezések írása közben.

Hozzon létre egy konfigurációs fájlt a projekt gyökérkönyvtárában:

Statikus sémafájl használata

Használja a következő konfigurációt, ha a sémát statikus fájlként exportálta:

Létrehoz .graphqlrc.yml:

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

Távoli végpont használata

Használja a következő konfigurációt, ha a sémát közvetlenül a GraphQL API-végpontról szeretné lekérni:

Létrehoz graphql.config.yml:

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

Konfigurációs lehetőségek

  • séma: Megadja a GraphQL-séma helyét
  • dokumentumok: Meghatározza, hogy mely fájlok rendelkezzenek IntelliSense-támogatással

A konfigurációs fájl létrehozása után indítsa újra a Visual Studio Code-ot, hogy a módosítások érvénybe lépjenek.

5. lépés: Kódlétrehozás beállítása

A GraphQL-kódlétrehozás automatikusan erős typeScript-interfészeket és React-horgokat hoz létre a sémából és a műveletekből, csökkentve a hibákat, és javítja a fejlesztési hatékonyságot. Elsődleges célja a típusbiztonság javítása és a GraphQL-projektek fejlesztésének egyszerűsítése, különösen olyan erősen gépelt nyelvek használata esetén, mint a TypeScript.

Kódgenerálási konfiguráció létrehozása

Statikus fájlbeállítás

Ha statikus fájlként exportálta a sémát, hozzon létre egy fájlt codegen.yml a projekt gyökérkönyvtárában:

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

Távoli végpont lehetőség

Ha a távoli végpont megközelítését használja, hozzon létre codegen.yml a projekt gyökerénél:

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

Konfigurációs részletezés

  • séma: A sémafájl vagy a távoli végpont elérési útja
  • dokumentumok: Glob-minta a GraphQL-műveleti fájlok helyének kiválasztásához
  • generál: Megadja a létrehozott kód kimeneti fájlját
  • beépülő modulok: Meghatározza, hogy milyen kódot kell létrehozni (TypeScript-típusok és React Apolló horgok)

Codegen-szkript hozzáadása

Adja hozzá a kódgenerálási szkriptet a package.json projektkönyvtárban lévő fájlhoz (ez a fájl a 2. lépésben az adattár klónozásakor lett hozzáadva):

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

6. lépés: GraphQL-műveletek írása

Hozzon létre .graphql fájlokat a src/operations címtárban a lekérdezések és a mutációk definiálásához. Az IntelliSense automatikus kiegészítést és ellenőrzést biztosít.

Példakérdések

Hozza létre src/operations/queries.graphql és adja meg a következő lekérdezéseket:

Íme egy minta lekérdezés az ügyféladatok lekéréséhez:

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

Íme egy példamutáció:

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

7. lépés: Típusok és horgok létrehozása

Futtassa a kódgenerálási parancsot TypeScript-típusok és React-horgok létrehozásához:

npm run codegen

A sikeres befejezés után a létrehozott kód a src/generated/graphql.tsx következőket tartalmazza:

  • TypeScript-interfészek az összes GraphQL-típushoz
  • Erősen gépelt React hookok minden egyes művelethez
  • Bemeneti és kimeneti típusdefiníciók

8. lépés: Generált kód használata a React-összetevőkben

Importálja és használja a létrehozott horgokat a React-összetevőkben, például:

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. lépés: Hitelesítés konfigurálása

Konfigurálja a Microsoft Entra ID-hitelesítést az alkalmazáshoz:

  1. Microsoft Entra-alkalmazás létrehozása a GraphQL-hez készült Connect applications to Fabric API-ban a Microsoft Entra alkalmazás létrehozása című szakaszt követve.

  2. Frissítse a authConfig.ts projekt fájlját a szükséges paraméterekkel:

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";

A teljes konfigurációs fájlért tekintse meg az adattár authConfig.ts mintáját .

10. lépés: Az alkalmazás futtatása

Indítsa el a fejlesztői kiszolgálót:

npm run dev

Az alkalmazás elindul a böngészőben a következő címen http://localhost:3000: . A rendszer arra kéri, hogy jelentkezzen be a Microsoft hitelesítő adataival a GraphQL API-adatok eléréséhez. A sikeres hitelesítés után megjelenik a Fabric SQL-adatbázis táblájának SalesLT.Customer ügyféladatai a React alkalmazásban.

Kapcsolódó tartalom

  • Last updated on