Del via

Udvikl GraphQL-applikationer i Visual Studio Code

Få mere at vide om, hvordan du bygger et frontend-program med React, Apollo Client og TypeScript, der integreres med en GraphQL-API, der hostes i Microsoft Fabric. Dette selvstudium dækker opsætning af lokale udviklingsværktøjer, herunder autofuldførelse, kodegenerering og IntelliSense for en optimal udvikleroplevelse.

Hvem bør bruge VS Code-udviklingsværktøjer

Lokal udvikling med VS Code er designet til:

  • React-udviklere , der bygger webapplikationer, der forbruger Fabric lakehouse- og warehouse-data via GraphQL
  • TypeScript-udviklere , der har brug for type-sikker klientkodegenerering til Fabric GraphQL API'er
  • Full-stack udviklere , der bygger skræddersyede analyseapplikationer oven på Fabric-platformen med lokal IDE-understøttelse
  • Udviklingsteams , der ønsker moderne værktøjer med IntelliSense og fejlfinding til Fabric-dataadgangsapplikationer

Brug denne tilgang, når du bygger React-applikationer, der har brug for rig IDE-understøttelse, kodegenerering og lokale fejlfindingsmuligheder med TypeScript og Apollo Client.

Forudsætninger

Før du begynder, skal du sikre dig, at du har:

  • Microsoft Fabric-arbejdsområdeadgang: Vær medlem af Fabric-arbejdsområdet med mindst bidragyderrolle (eller højere: Admin, Medlem) for at oprette og ændre GraphQL API-elementer
  • Tilladelser til datakilder: Læse-/skrivetilladelser på de datakilder, du planlægger at eksponere gennem GraphQL API'en
  • Node.js installeret på din udviklingsmaskine (inkluderer NPM)
  • Visual Studio Code installeret på din udviklingsmaskine
  • Grundlæggende viden om React-, TypeScript- og GraphQL-begreber

Trin 1: Opret en GraphQL API i Microsoft Fabric

Notat

Denne guide demonstrerer oprettelsen af et GraphQL API ud fra en SQL-databasekontekst. Du opretter først SQL-databasen og opretter derefter GraphQL API'et direkte fra den database. Hvis du allerede har et eksisterende GraphQL API og vil forbinde til det, så følg Get Started-guiden , hvor du først opretter API'et og derefter forbinder til en SQL-database eller anden datakilde.

Opret en SQL-database

For at oprette en SQL-database, der indeholder eksempeldata til dit GraphQL API:

  1. I dit Fabric-arbejdsområde skal du vælge Nyt element.
  2. Vælg SQL-database (prøveversion).
  3. Angiv et navn til databasen.
  4. Vælg Eksempeldata for automatisk at oprette tabeller og udfylde dem med eksempeldata. Dette opretter AdventureWorksLT eksempeldatabasen med SalesLT-skemaet, inklusive tabeller som SalesLT.Customer, SalesLT.Product og SalesLT.SalesOrderHeader.

Tips

Hvis du allerede har en SQL-database med eksempeldata fra en tidligere tutorial eller GraphQL API-oprettelse, kan du genbruge den samme database. En enkelt database kan understøtte flere GraphQL API'er, så der er ikke behov for at oprette en ny database, hvis du allerede har en med SalesLT-skemaet.

Opret GraphQL API

Nu hvor du har en SQL-database med eksempeldata, skal du oprette GraphQL API'et:

  1. I din SQL-database skal du vælge Ny API til GraphQL på båndet.

    Skærmbillede af New API for GraphQL-muligheden i SQL-databasebåndet.

  2. Angiv et navn til din API.

  3. Vælg alle SalesLT-tabeller fra din database.

  4. Vælg Indlæs for at generere API'en.

Din GraphQL API er nu klar og tilgængelig i dit Fabric-arbejdsområde.

Trin 2: Konfigurer dit udviklingsmiljø

For at følge denne vejledning skal du gennemføre disse trin for at opsætte React starter-applikationen, installere de nødvendige afhængigheder og konfigurere Visual Studio Code med GraphQL-understøttelse.

  1. Klon starterapplikationen - Få React starterapplikationen fra Microsoft Fabric samples-arkivet:

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

  2. Installer afhængigheder - Installer de nødvendige pakker til GraphQL-udvikling, autofuldførelse og kodegenerering:

    npm install

  3. Installer den nødvendige Visual Studio Code-udvidelse - Installer GraphQL: Language Feature Support-udvidelsen i Visual Studio Code for at muliggøre syntaksmarkering, validering og IntelliSense til GraphQL-operationer.

Trin 3: Konfigurer dit GraphQL-skema

Et GraphQL-skema definerer strukturen af dit API – hvilke data der er tilgængelige, hvilke operationer du kan udføre, og hvilke relationer der er mellem forskellige datatyper. Dine udviklingsværktøjer bruger dette skema til at levere IntelliSense, kodefuldførelse og typegenerering, hvilket gør det meget nemmere at skrive korrekte GraphQL-forespørgsler og mutationer.

Du kan få dit GraphQL-skema på to måder:

Mulighed 1: Eksporter skema som statisk fil

  1. I din Fabric GraphQL-API skal du vælge Eksportér skema på båndet.
  2. Det downloadede filnavn inkluderer dit GraphQL API's ID (for eksempel, GraphQL_your-api-id_schema.graphql). Gem det i din projektrodmappe og omdøb det til schema.graphql – det er filnavnet, du bruger i de følgende konfigurationstrin.

Mulighed 2: Brug fjernslutpunkt

  1. Få adgang til den GraphQL API, du oprettede i Fabric Portal.
  2. Hent et godkendelsestoken ved hjælp af PowerShell med Get-PowerBIAccessToken

Notat

Mens fjernendepunktsmuligheden altid giver det mest up-to-dato-skema, er det hentede token midlertidigt og udløber hver time. De bør kun bruges til test- og udviklingsformål, og når det er muligt, skal du bruge en statisk fil for at undgå problemer med tokenudløb.

Trin 4: Konfigurer IntelliSense og autofuldførelse

Nu opsætter du IntelliSense ved hjælp af skemaet fra Step 3. Skemafilen (uanset om den er statisk eller fra fjern endpoint) gør det muligt for VS Code at levere realtidsforslag til kode, fejlopdagelse og feltvalidering, mens du skriver GraphQL-forespørgsler.

Opret en konfigurationsfil i projektroden:

Brug af statisk skemafil

Brug følgende konfiguration, hvis du eksporterede skemaet som en statisk fil:

Opret .graphqlrc.yml:

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

Brug af fjernslutpunkt

Brug følgende konfiguration, hvis du foretrækker at hente skemaet direkte fra dit GraphQL API-endpoint:

Opret graphql.config.yml:

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

Konfigurationsmuligheder

  • schema: Angiver placeringen af dit GraphQL-skema
  • dokumenter: Definerer, hvilke filer der skal have IntelliSense-understøttelse

Når du har oprettet konfigurationsfilen, skal du genstarte Visual Studio Code for at sikre, at ændringerne træder i kraft.

Trin 5: Konfigurer kodegenerering

GraphQL-kodegenerering opretter automatisk stærkt indtastede TypeScript-grænseflader og React-kroge fra dit skema og dine operationer, hvilket reducerer fejl og forbedrer udviklingseffektiviteten. Dens primære formål er at forbedre typesikkerheden og strømline udviklingen i GraphQL-projekter, især når der arbejdes med stærkt typede sprog som TypeScript.

Opret codegen-konfiguration

Statisk fil-mulighed

Hvis du eksporterede skemaet som en statisk fil, så skab codegen.yml det ved din projektrod:

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

Fjernendepunktsmulighed

Hvis du bruger fjern-endpoint-tilgangen, så opret codegen.yml ved dit projektrod:

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

Konfiguration opdeling

  • skema: Sti til skemafilen eller fjernslutpunktet
  • dokumenter: Glob-mønster til lokalisering af GraphQL-operationsfiler
  • genererer: Angiver outputfilen for genereret kode
  • plugins: Bestemmer, hvilken kode der skal genereres (TypeScript-typer og React Apollo-kroge)

Tilføj codegen-script

Tilføj kodegenereringsscriptet til package.json filen i din projektmappe (denne fil blev inkluderet , da du klonede repositoryet i trin 2):

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

Trin 6: Skriv GraphQL-operationer

Opret .graphql filer i din src/operations mappe for at definere dine forespørgsler og mutationer. IntelliSense giver mulighed for automatisk fuldførelse og validering.

Eksempelforespørgsler

Opret src/operations/queries.graphql og indtast følgende forespørgsler:

Her er et eksempel på en forespørgsel til at hente kundedata:

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

Her er et eksempel på en mutation:

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

Trin 7: Generer typer og kroge

Kør kodegenereringskommandoen for at oprette TypeScript-typer og React-kroge:

npm run codegen

Når du er færdig, har du den genererede kode indeholdt src/generated/graphql.tsx :

  • TypeScript-grænseflader til alle GraphQL-typer
  • Stærkt typede React-kroge til hver operation
  • Definitioner af input- og outputtyper

Trin 8: Brug genereret kode i dine React-komponenter

Importer og brug de genererede kroge i dine React-komponenter, f.eks.:

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;

Trin 9: Konfigurer godkendelse

Konfigurer Microsoft Entra ID-godkendelse for dit program:

  1. Opret en Microsoft Entra-app ved at følge afsnittet Opret en Microsoft Entra-app i Opret forbindelse mellem programmer og Fabric API til GraphQL.

  2. Opdater authConfig.ts filen i projektet med de påkrævede parametre:

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

Du kan finde den komplette konfigurationsfil i authConfig.ts eksemplet i lageret.

Trin 10: Kør din applikation

Start din udviklingsserver:

npm run dev

Din applikation starter i browseren ved http://localhost:3000. Du bliver bedt om at logge ind med dine Microsoft-oplysninger for at få adgang til GraphQL API-dataene. Efter vellykket autentificering vil du se kundedata fra tabellen i din Fabric SQL-database SalesLT.Customer vist i React-applikationen.

Relateret indhold

  • Last updated on