Utveckla GraphQL-program i Visual Studio Code

Lär dig hur du skapar ett klientdelsprogram med React, Apollo Client och TypeScript som integreras med ett GraphQL-API som finns i Microsoft Fabric. Den här självstudien beskriver hur du konfigurerar lokala utvecklingsverktyg som automatisk komplettering, kodgenerering och IntelliSense för en optimal utvecklarupplevelse.

Vem ska använda utvecklingsverktyg för VS Code

Lokal utveckling med VS Code är utformad för:

React-utvecklare skapar webbprogram som använder Fabric Lakehouse- och lagerdata via GraphQL
TypeScript-utvecklare som behöver typsäker klientkodgenerering för Fabric GraphQL-API:er
Fullstacksutvecklare skapar anpassade analysprogram ovanpå Fabric-plattformen med lokal IDE-support
Utvecklingsteam som vill ha moderna verktyg med IntelliSense och felsökning för Fabric dataåtkomst-applikationer

Använd den här metoden när du skapar React-program som behöver omfattande IDE-stöd, kodgenerering och lokala felsökningsfunktioner med TypeScript och Apollo-klienten.

Förutsättningar

Kontrollera att du har följande innan du börjar:

Åtkomst till Microsoft Fabric-arbetsyta: Var medlem i Fabric-arbetsytan med åtminstone rollen deltagare (eller högre: Administratör, Medlem) för att skapa och redigera GraphQL-API-objekt.
Behörigheter för datakälla: Läs-/skrivbehörigheter för de datakällor som du planerar att exponera via GraphQL-API:et
Node.js installerat på utvecklingsdatorn (inklusive npm)
Visual Studio Code installerat på utvecklingsdatorn
Grundläggande kunskaper om React-, TypeScript- och GraphQL-begrepp

Steg 1: Skapa ett GraphQL-API i Microsoft Fabric

Anmärkning

Den här guiden visar hur du skapar ett GraphQL-API från en SQL-databaskontext. Först skapar du SQL-databasen och skapar sedan GraphQL-API:et direkt från databasen. Om du redan har ett befintligt GraphQL-API och vill ansluta till det följer du guiden Kom igång där du först skapar API:et och sedan ansluter till en SQL-databas eller annan datakälla.

Skapa en SQL-databas

Så här skapar du en SQL-databas som innehåller exempeldata för GraphQL-API:et:

I arbetsytan Infrastruktur väljer du Nytt objekt.
Välj SQL-databas (förhandsversion).
Ange ett namn för databasen.
Välj Exempeldata för att automatiskt skapa tabeller och fylla dem med exempeldata. Då skapas AdventureWorksLT-exempeldatabasen med SalesLT-schemat, inklusive tabeller som SalesLT.Customer, SalesLT.Product och SalesLT.SalesOrderHeader.

Tips/Råd

Om du redan har en SQL-databas med exempeldata från en tidigare självstudie eller skapande av GraphQL API kan du återanvända samma databas. En enskild databas har stöd för flera GraphQL-API:er, så du behöver inte skapa en ny databas om du redan har en med SalesLT-schemat.

Skapa GraphQL-API:et

Nu när du har en SQL-databas med exempeldata skapar du GraphQL-API:et:

I SQL-databasen väljer du Nytt API för GraphQL i menyfliksområdet.
Ange ett namn för ditt API.
Välj alla SalesLT-tabeller från databasen.
Välj Läs in för att generera API:et.

GraphQL-API:et är nu klart och tillgängligt på arbetsytan Infrastruktur.

Steg 2: Konfigurera utvecklingsmiljön

Följ den här självstudien genom att utföra de här stegen för att konfigurera React-startprogrammet, installera nödvändiga beroenden och konfigurera Visual Studio Code med GraphQL-stöd.

Klona startprogrammet – Hämta React-startprogrammet från Microsoft Fabric-exempelsamlingen:

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

Installera beroenden – Installera de paket som krävs för GraphQL-utveckling, automatisk komplettering och kodgenerering:
```
npm install
```
Installera det nödvändiga Visual Studio Code-tillägget – Installera GraphQL: Language Feature Support-tillägget i Visual Studio Code för att aktivera syntaxmarkering, validering och IntelliSense för GraphQL-åtgärder.

Steg 3: Konfigurera GraphQL-schemat

Ett GraphQL-schema definierar strukturen för ditt API – vilka data som är tillgängliga, vilka åtgärder du kan utföra och vad relationerna mellan olika datatyper är. Dina utvecklingsverktyg använder det här schemat för att tillhandahålla IntelliSense, kodkomplettering och typgenerering, vilket gör det mycket enklare att skriva korrekta GraphQL-frågor och mutationer.

Du kan hämta GraphQL-schemat på två sätt:

Alternativ 1: Exportera schema som statisk fil

I Ditt Fabric GraphQL-API väljer du Exportera schema i menyfliksområdet.
Det nedladdade filnamnet innehåller graphQL-API:ets ID (till exempel GraphQL_your-api-id_schema.graphql). Spara den i projektrotkatalogen och byt namn på den till schema.graphql – det här är det filnamn som du använder i de konfigurationssteg som följer.

Alternativ 2: Använd fjärrslutpunkt

Få åtkomst till GraphQL-API:et som du skapade i Infrastrukturportalen.
Hämta en auktoriseringstoken med Hjälp av PowerShell med Get-PowerBIAccessToken

Anmärkning

Alternativet fjärrslutpunkt innehåller alltid det mest up-to-date-schemat, men den hämtade token är tillfällig och upphör att gälla varje timme. De bör endast användas för testning och utveckling, när det är möjligt använda en statisk fil för att undvika problem med tokens förfallotid.

Steg 4: Konfigurera IntelliSense och automatisk komplettering

Nu ska du konfigurera IntelliSense med hjälp av schemat från steg 3. Schemafilen (oavsett om den är statisk eller från fjärrslutpunkten) gör det möjligt för VS Code att tillhandahålla kodförslag i realtid, felidentifiering och fältverifiering när du skriver GraphQL-frågor.

Skapa en konfigurationsfil i projektroten:

Använda statisk schemafil

Använd följande konfiguration om du exporterade schemat som en statisk fil:

Skapa .graphqlrc.yml:

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

Använda fjärrslutpunkt

Använd följande konfiguration om du föredrar att hämta schemat direkt från GraphQL API-slutpunkten:

Skapa graphql.config.yml:

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

Konfigurationsalternativ

schema: Anger platsen för ditt GraphQL-schema
dokument: Definierar vilka filer som ska ha Stöd för IntelliSense

När du har skapat konfigurationsfilen startar du om Visual Studio Code för att säkerställa att ändringarna börjar gälla.

Steg 5: Konfigurera kodgenerering

GraphQL-kodgenerering skapar automatiskt starkt typskrivna TypeScript-gränssnitt och React-hookar från ditt schema och dina åtgärder, vilket minskar felen och förbättrar utvecklingseffektiviteten. Dess främsta syfte är att förbättra typsäkerheten och effektivisera utvecklingen i GraphQL-projekt, särskilt när du arbetar med starkt skrivna språk som TypeScript.

Skapa codegen-konfiguration

Alternativ för statisk fil

Om du exporterade schemat som en statisk fil skapar codegen.yml du i projektroten:

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

Fjärrslutpunktsalternativ

Om du använder fjärrslutpunktsmetoden skapar codegen.yml du i projektroten:

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

Konfigurationsuppdelning

schema: Sökväg till schemafilen eller fjärrslutpunkten
dokument: Glob-mönster för att hitta GraphQL-åtgärdsfiler
genererar: Anger utdatafilen för genererad kod
plugin-program: Avgör vilken kod som ska genereras (TypeScript-typer och React Apollo-krokar)

Lägga till codegen-skript

Lägg till kodgenereringsskriptet i filen i projektkatalogen package.json (den här filen inkluderades när du klonade lagringsplatsen i steg 2):

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

Steg 6: Skriva GraphQL-åtgärder

Skapa .graphql filer i katalogen src/operations för att definiera dina frågor och mutationer. IntelliSense tillhandahåller automatisk komplettering och validering.

Exempel på förfrågningar

Skapa src/operations/queries.graphql och ange följande frågor:

Här är en exempelfråga för att hämta kunddata:

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

Här är ett exempel på mutation:

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

Steg 7: Generera typer och krokar

Kör kodgenereringskommandot för att skapa TypeScript-typer och React-krokar:

npm run codegen

När den har slutförts har du den genererade koden i src/generated/graphql.tsx som innehåller:

TypeScript-gränssnitt för alla GraphQL-typer
Starkt skrivna React-krokar för varje åtgärd
Definitioner av indata- och utdatatyp

Steg 8: Använd genererad kod i React-komponenterna

Importera och använd de genererade krokarna i react-komponenterna, till exempel:

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;

Steg 9: Konfigurera autentisering

Konfigurera Microsoft Entra ID-autentisering för ditt program:

Skapa en Microsoft Entra-app enligt avsnittet Skapa en Microsoft Entra-app i Ansluta program till Fabric API för GraphQL.
authConfig.ts Uppdatera filen i projektet med de parametrar som krävs:

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

Den fullständiga konfigurationsfilen finns i exemplet authConfig.ts på lagringsplatsen.

Steg 10: Kör programmet

Starta utvecklingsservern:

npm run dev

Programmet startas i webbläsaren på http://localhost:3000. Du uppmanas att logga in med dina Microsoft-autentiseringsuppgifter för att få åtkomst till GraphQL API-data. Efter lyckad autentisering ser du kunddata från din Fabric SQL-databastabell SalesLT.Customer som visas i React-programmet.

Feedback

Var den här sidan hjälpsam?

Last updated on 2026-01-21