GraphQL-toepassingen ontwikkelen in Visual Studio Code

Leer hoe u een front-endtoepassing bouwt met React, Apollo Client en TypeScript die kan worden geïntegreerd met een GraphQL-API die wordt gehost in Microsoft Fabric. Deze zelfstudie bevat informatie over het instellen van lokale ontwikkelhulpprogramma's, waaronder automatisch aanvullen, het genereren van code en IntelliSense voor een optimale ontwikkelaarservaring.

Wie moet VS Code-ontwikkelhulpprogramma's gebruiken

Lokale ontwikkeling met VS Code is ontworpen voor:

React-ontwikkelaars die webtoepassingen bouwen die Fabric lakehouse- en magazijngegevens gebruiken via GraphQL
TypeScript-ontwikkelaars die typeveilige clientcodegeneratie nodig hebben voor Fabric GraphQL-API's
Ontwikkelaars voor de volledige stack die aangepaste analysetoepassingen bouwen bovenop het Fabric-platform met ondersteuning voor lokale IDE.
Ontwikkelteams die moderne hulpprogramma's willen gebruiken met IntelliSense en foutopsporing voor Fabric-toepassingen voor gegevenstoegang

Gebruik deze methode wanneer u React-toepassingen bouwt waarvoor uitgebreide IDE-ondersteuning, codegeneratie en lokale foutopsporingsmogelijkheden met TypeScript en Apollo Client nodig zijn.

Vereiste voorwaarden

Voordat u begint, moet u ervoor zorgen dat u het volgende hebt:

Toegang tot Microsoft Fabric-werkruimte: lid zijn van de Fabric-werkruimte met ten minste de rol Bijdrager (of hoger: Beheerder, Lid) om GraphQL API-items te maken en te wijzigen
Machtigingen voor gegevensbronnen: lees-/schrijfmachtigingen voor de gegevensbronnen die u beschikbaar wilt maken via de GraphQL-API
Node.js geïnstalleerd op uw ontwikkelcomputer (inclusief npm)
Visual Studio Code geïnstalleerd op uw ontwikkelcomputer
Basiskennis van react-, TypeScript- en GraphQL-concepten

Stap 1: Een GraphQL-API maken in Microsoft Fabric

Opmerking

In deze handleiding ziet u hoe u een GraphQL-API maakt op basis van een SQL-databasecontext. U maakt eerst de SQL-database en maakt vervolgens rechtstreeks vanuit die database de GraphQL-API. Als u al een bestaande GraphQL-API hebt en er verbinding mee wilt maken, volgt u de handleiding Aan de slag waar u eerst de API maakt en vervolgens verbinding maakt met een SQL-database of een andere gegevensbron.

Een SQL-database maken

Een SQL-database maken die voorbeeldgegevens voor uw GraphQL-API bevat:

Selecteer Nieuw item in uw Fabric-werkruimte.
Selecteer SQL database (voorbeeldversie).
Geef een naam op voor uw database.
Selecteer Voorbeeldgegevens om automatisch tabellen te maken en deze te vullen met voorbeeldgegevens. Hiermee maakt u de AdventureWorksLT-voorbeelddatabase met het SalesLT-schema, waaronder tabellen zoals SalesLT.Customer, SalesLT.Product en SalesLT.SalesOrderHeader.

Aanbeveling

Als u al een SQL-database hebt met voorbeeldgegevens uit een vorige zelfstudie of graphQL-API, kunt u diezelfde database opnieuw gebruiken. Eén database kan ondersteuning bieden voor meerdere GraphQL-API's, dus u hoeft geen nieuwe database te maken als u er al een hebt met het SalesLT-schema.

De GraphQL-API maken

Nu u een SQL-database met voorbeeldgegevens hebt, maakt u de GraphQL-API:

Selecteer in uw SQL-database nieuwe API voor GraphQL op het lint.
Geef een naam op voor uw API.
Selecteer alle SalesLT-tabellen in uw database.
Selecteer Laden om de API te genereren.

Uw GraphQL-API is nu gereed en beschikbaar in uw Fabric-werkruimte.

Stap 2: uw ontwikkelomgeving instellen

Als u deze zelfstudie wilt volgen, voert u deze stappen uit om de React Starter-toepassing in te stellen, de benodigde afhankelijkheden te installeren en Visual Studio Code te configureren met GraphQL-ondersteuning.

Kloon de starterstoepassing - Haal de React Starter-toepassing op uit de opslagplaats met Microsoft Fabric-voorbeelden:

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

Afhankelijkheden installeren : installeer de vereiste pakketten voor GraphQL-ontwikkeling, automatisch aanvullen en codegeneratie:
```
npm install
```
Installeer de vereiste Visual Studio Code-extensie - Installeer de GraphQL: taalfunctieondersteuningsextensie in Visual Studio Code om syntaxismarkeringen, validatie en IntelliSense voor GraphQL-bewerkingen in te schakelen.

Stap 3: Uw GraphQL-schema configureren

Een GraphQL-schema definieert de structuur van uw API: welke gegevens beschikbaar zijn, welke bewerkingen u kunt uitvoeren en wat de relaties tussen verschillende gegevenstypen zijn. Uw ontwikkelhulpprogramma's gebruiken dit schema om IntelliSense, codevoltooiing en typegeneratie te bieden, waardoor het veel eenvoudiger is om juiste GraphQL-query's en mutaties te schrijven.

U kunt uw GraphQL-schema op twee manieren verkrijgen:

Optie 1: Schema exporteren als statisch bestand

Selecteer in uw Fabric GraphQL-API Exportschema in het lint.
De gedownloade bestandsnaam bevat de id van uw GraphQL-API (bijvoorbeeld GraphQL_your-api-id_schema.graphql). Sla deze op in de hoofdmap van uw project en wijzig de schema.graphql naam ervan in: dit is de bestandsnaam die u gebruikt in de configuratiestappen die volgen.

Optie 2: Extern eindpunt gebruiken

Open de GraphQL-API die u hebt gemaakt in de Fabric-portal.
Een autorisatietoken verkrijgen met behulp van PowerShell met Get-PowerBIAccessToken

Opmerking

Hoewel de optie voor extern eindpunt altijd het meest actuele schema biedt, is het opgehaalde token tijdelijk en verloopt het elk uur. Ze moeten alleen worden gebruikt voor test- en ontwikkelingsdoeleinden, indien mogelijk een statisch bestand gebruiken om problemen met het verlopen van tokens te voorkomen.

Stap 4: IntelliSense en automatisch aanvullen configureren

Nu gaat u IntelliSense instellen met behulp van het schema uit stap 3. Met het schemabestand (statisch of vanaf een extern eindpunt) kan VS Code realtime codesuggesties, foutdetectie en veldvalidatie bieden terwijl u GraphQL-query's schrijft.

Maak een configuratiebestand in de hoofdmap van uw project:

Statisch schemabestand gebruiken

Gebruik de volgende configuratie als u het schema als een statisch bestand hebt geëxporteerd:

Maken .graphqlrc.yml:

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

Extern eindpunt gebruiken

Gebruik de volgende configuratie als u het schema liever rechtstreeks ophaalt uit uw GraphQL API-eindpunt:

Maken graphql.config.yml:

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

Configuratieopties

schema: Hiermee geeft u de locatie van uw GraphQL-schema
documenten: definieert welke bestanden ondersteuning moeten hebben voor IntelliSense

Nadat u het configuratiebestand hebt gemaakt, start u Visual Studio Code opnieuw op om ervoor te zorgen dat wijzigingen van kracht worden.

Stap 5: Het genereren van code instellen

GraphQL-codegeneratie maakt automatisch sterk getypte TypeScript-interfaces en React-hooks van uw schema en bewerkingen, waardoor fouten worden verminderd en de ontwikkelingsefficiëntie wordt verbeterd. Het primaire doel is om de veiligheid van het type te verbeteren en de ontwikkeling in GraphQL-projecten te stroomlijnen, met name wanneer u werkt met sterk getypte talen zoals TypeScript.

Configuratie van codegen maken

Optie Statisch bestand

Als u het schema als een statisch bestand hebt geëxporteerd, maakt u het volgende codegen.yml in de hoofdmap van uw project:

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

Optie extern eindpunt

Als u de externe eindpuntbenadering gebruikt, maakt u codegen.yml in de hoofdmap van uw project.

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

Configuratieoverzicht

schema: Pad naar uw schemabestand of extern eindpunt
documenten: Glob-patroon voor het zoeken naar GraphQL-bewerkingsbestanden
genereert: hiermee geeft u het uitvoerbestand voor gegenereerde code op
plugins: bepaalt welke code moet worden gegenereerd (TypeScript-typen en React Apollo-hooks)

Codegen-script toevoegen

Voeg het script voor het genereren van code toe aan het package.json bestand in uw projectmap (dit bestand is opgenomen toen u de opslagplaats in stap 2 kloonde):

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

Stap 6: GraphQL-bewerkingen schrijven

Maak .graphql-bestanden in uw src/operations-directory om uw queries en mutaties te definiëren. IntelliSense biedt autocompletion en validatie.

Voorbeeldvragen

Maak src/operations/queries.graphql en voer de volgende query's in:

Hier volgt een voorbeeldquery voor het ophalen van klantgegevens:

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

Hier volgt een voorbeeldmutatie:

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

Stap 7: Typen en hooks aanmaken

Voer de opdracht voor het genereren van code uit om TypeScript-typen en React-hooks te maken:

npm run codegen

Na succesvolle voltooiing hebt u de gegenereerde code in src/generated/graphql.tsx.

TypeScript-interfaces voor alle GraphQL-typen
Sterk getypte React-hooks voor elke bewerking
Definities van invoer- en uitvoertypen

Stap 8: Gegenereerde code gebruiken in uw React-onderdelen

Importeer en gebruik de gegenereerde hooks in uw React-onderdelen, bijvoorbeeld:

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;

Stap 9: Verificatie configureren

Configureer Microsoft Entra ID-verificatie voor uw toepassing:

Maak een Microsoft Entra-app volgens de sectie Een Microsoft Entra-app maken in Connect applications to Fabric API for GraphQL.
Werk het authConfig.ts bestand in uw project bij met de vereiste parameters:

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

Raadpleeg het authConfig.ts voorbeeld in de opslagplaats voor het volledige configuratiebestand.

Stap 10: Uw toepassing uitvoeren

Start de ontwikkelserver:

npm run dev

Uw toepassing wordt gestart in de browser op http://localhost:3000. U wordt gevraagd u aan te melden met uw Microsoft-referenties voor toegang tot de GraphQL API-gegevens. Na een geslaagde verificatie ziet u de klantgegevens uit de SalesLT.Customer-tabel van uw Fabric SQL-database, weergegeven in de React-toepassing.

Feedback

Is deze pagina nuttig?

Last updated on 2026-01-21