Ανάπτυξη εφαρμογών GraphQL σε κώδικα Visual Studio

Μάθετε πώς μπορείτε να δημιουργήσετε μια εφαρμογή front-end με το React, το Apollo Client και το TypeScript που ενσωματώνεται σε ένα API GraphQL που φιλοξενείται στο Microsoft Fabric. Αυτό το πρόγραμμα εκμάθησης καλύπτει τη ρύθμιση εργαλείων τοπικής ανάπτυξης, συμπεριλαμβανομένης της αυτόματης συμπλήρωσης, της δημιουργίας κώδικα και του IntelliSense για βέλτιστη εμπειρία προγραμματιστή.

Ποιος πρέπει να χρησιμοποιεί τα εργαλεία ανάπτυξης VS Code

Η τοπική ανάπτυξη με VS Code έχει σχεδιαστεί για:

Οι προγραμματιστές του React δημιουργούν εφαρμογές web που καταναλώνουν δεδομένα Fabric lakehouse και αποθήκης μέσω GraphQL
Προγραμματιστές TypeScript που χρειάζονται δημιουργία κώδικα πελάτη ασφαλούς τύπου για API Fabric GraphQL
Προγραμματιστές πλήρους στοίβας που δημιουργούν προσαρμοσμένες εφαρμογές ανάλυσης πάνω από την πλατφόρμα Fabric με τοπική υποστήριξη IDE
Ομάδες ανάπτυξης που θέλουν σύγχρονα εργαλεία με IntelliSense και εντοπισμό σφαλμάτων για εφαρμογές πρόσβασης δεδομένων Fabric

Χρησιμοποιήστε αυτήν την προσέγγιση όταν δημιουργείτε εφαρμογές React που χρειάζονται πλούσια υποστήριξη IDE, δημιουργία κώδικα και τοπικές δυνατότητες εντοπισμού σφαλμάτων με το TypeScript και το Apollo Client.

Προαπαιτούμενα

Πριν ξεκινήσετε, βεβαιωθείτε ότι έχετε:

Πρόσβαση στο χώρο εργασίας Microsoft Fabric: Γίνετε μέλος του χώρου εργασίας Fabric με τουλάχιστον ρόλο Συμβάλλοντα (ή υψηλότερο: Διαχειριστής, Μέλος) για να δημιουργήσετε και να τροποποιήσετε στοιχεία GraphQL API
Δικαιώματα πηγής δεδομένων: Δικαιώματα ανάγνωσης/εγγραφής στις πηγές δεδομένων που σκοπεύετε να εκθέσετε μέσω του GraphQL API
Node.js εγκατεστημένο στον υπολογιστή ανάπτυξης (περιλαμβάνει npm)
Ο κώδικας του Visual Studio είναι εγκατεστημένος στον υπολογιστή ανάπτυξης
Βασικές γνώσεις των εννοιών React, TypeScript και GraphQL

Βήμα 1: Δημιουργήστε ένα API GraphQL στο Microsoft Fabric

Σημείωμα

Αυτός ο οδηγός δείχνει τη δημιουργία ενός GraphQL API από ένα περιβάλλον βάσης δεδομένων SQL. Δημιουργείτε πρώτα τη βάση δεδομένων SQL και, στη συνέχεια, δημιουργείτε το GraphQL API απευθείας από αυτήν τη βάση δεδομένων. Εάν έχετε ήδη ένα υπάρχον API GraphQL και θέλετε να συνδεθείτε σε αυτό, ακολουθήστε τον Οδηγό γρήγορων αποτελεσμάτων όπου δημιουργείτε πρώτα το API και, στη συνέχεια, συνδέεστε σε μια βάση δεδομένων SQL ή άλλη προέλευση δεδομένων.

Δημιουργία βάσης δεδομένων SQL

Για να δημιουργήσετε μια βάση δεδομένων SQL που περιέχει δείγματα δεδομένων για το GraphQL API σας:

Στον χώρο εργασίας Fabric, επιλέξτε New Item.
Επιλέξτε βάση δεδομένων SQL (προεπισκόπηση).
Δώστε ένα όνομα για τη βάση δεδομένων σας.
Επιλέξτε Δείγμα δεδομένων για να δημιουργήσετε αυτόματα πίνακες και να τους συμπληρώσετε με δείγμα δεδομένων. Με αυτόν τον τρόπο δημιουργείται το δείγμα βάσης δεδομένων AdventureWorksLT με το σχήμα SalesLT, συμπεριλαμβανομένων πινάκων όπως SalesLT.Customer, SalesLT.Product και SalesLT.SalesOrderHeader.

Φιλοδώρημα

Εάν έχετε ήδη μια βάση δεδομένων SQL με δείγματα δεδομένων από προηγούμενο σεμινάριο ή δημιουργία GraphQL API, μπορείτε να χρησιμοποιήσετε ξανά την ίδια βάση δεδομένων. Μια μεμονωμένη βάση δεδομένων μπορεί να υποστηρίξει πολλαπλά API GraphQL, επομένως δεν χρειάζεται να δημιουργήσετε μια νέα βάση δεδομένων εάν έχετε ήδη μια με το σχήμα SalesLT.

Δημιουργήστε το API GraphQL

Τώρα που έχετε μια βάση δεδομένων SQL με δείγματα δεδομένων, δημιουργήστε το GraphQL API:

Στη βάση δεδομένων SQL, επιλέξτε Νέο API για GraphQL από την κορδέλα.
Δώστε ένα όνομα για το API σας.
Επιλέξτε όλους τους πίνακες SalesLT από τη βάση δεδομένων σας.
Επιλέξτε Φόρτωση για να δημιουργήσετε το API.

Το GraphQL API σας είναι πλέον έτοιμο και διαθέσιμο στον χώρο εργασίας Fabric.

Βήμα 2: Ρυθμίστε το περιβάλλον ανάπτυξής σας

Για να ακολουθήσετε αυτό το σεμινάριο, ολοκληρώστε αυτά τα βήματα για να ρυθμίσετε την εφαρμογή εκκίνησης React, να εγκαταστήσετε τις απαραίτητες εξαρτήσεις και να διαμορφώσετε τον κώδικα του Visual Studio με υποστήριξη GraphQL.

Κλωνοποίηση της εφαρμογής εκκίνησης - Λήψη της εφαρμογής εκκίνησης React από το αποθετήριο δειγμάτων Microsoft Fabric:
```
git clone https://github.com/microsoft/fabric-samples.git
cd fabric-samples/docs-samples/data-engineering/GraphQL/React-Apollo-TS
```
Εγκατάσταση εξαρτήσεων - Εγκαταστήστε τα απαιτούμενα πακέτα για την ανάπτυξη, την αυτόματη συμπλήρωση και τη δημιουργία κώδικα GraphQL:
```
npm install
```
Εγκαταστήστε την απαιτούμενη επέκταση κώδικα του Visual Studio - Εγκαταστήστε την επέκταση GraphQL: Υποστήριξη δυνατοτήτων γλώσσας στον κώδικα του Visual Studio για να ενεργοποιήσετε την επισήμανση σύνταξης, την επικύρωση και τις λειτουργίες IntelliSense for GraphQL.

Βήμα 3: Διαμορφώστε το σχήμα GraphQL

Ένα σχήμα GraphQL ορίζει τη δομή του API σας - ποια δεδομένα είναι διαθέσιμα, ποιες λειτουργίες μπορείτε να εκτελέσετε και ποιες είναι οι σχέσεις μεταξύ διαφορετικών τύπων δεδομένων. Τα εργαλεία ανάπτυξής σας χρησιμοποιούν αυτό το σχήμα για να παρέχουν IntelliSense, συμπλήρωση κώδικα και δημιουργία τύπων, καθιστώντας πολύ πιο εύκολη τη σύνταξη σωστών ερωτημάτων και μεταλλάξεων GraphQL.

Μπορείτε να αποκτήσετε το σχήμα GraphQL με δύο τρόπους:

Επιλογή 1: Εξαγωγή σχήματος ως στατικού αρχείου

Στο API Fabric GraphQL, επιλέξτε Εξαγωγή σχήματος από την κορδέλα.
Το όνομα του ληφθέντος αρχείου περιλαμβάνει το αναγνωριστικό του GraphQL API (για παράδειγμα, GraphQL_your-api-id_schema.graphql). Αποθηκεύστε το στον ριζικό κατάλογο του έργου σας και μετονομάστε το σε schema.graphql - αυτό είναι το όνομα αρχείου που χρησιμοποιείτε στα βήματα διαμόρφωσης που ακολουθούν.

Επιλογή 2: Χρήση απομακρυσμένου τελικού σημείου

Αποκτήστε πρόσβαση στο GraphQL API που δημιουργήσατε στο Fabric Portal.
Αποκτήστε ένα διακριτικό εξουσιοδότησης χρησιμοποιώντας το PowerShell με το Get-PowerBIAccessToken

Σημείωμα

Ενώ η επιλογή απομακρυσμένου τελικού σημείου παρέχει πάντα το πιο up-toσχήμα ημερομηνίας, το διακριτικό που ανακτάται είναι προσωρινό και λήγει κάθε ώρα. Θα πρέπει να χρησιμοποιούνται μόνο για σκοπούς δοκιμής και ανάπτυξης, όποτε είναι δυνατόν χρησιμοποιήστε ένα στατικό αρχείο για να αποφύγετε προβλήματα με τη λήξη του διακριτικού.

Βήμα 4: Ρύθμιση παραμέτρων IntelliSense και αυτόματης συμπλήρωσης

Τώρα θα ρυθμίσετε το IntelliSense χρησιμοποιώντας το σχήμα από το Βήμα 3. Το αρχείο σχήματος (είτε στατικό είτε από απομακρυσμένο τελικό σημείο) επιτρέπει στο VS Code να παρέχει προτάσεις κώδικα σε πραγματικό χρόνο, ανίχνευση σφαλμάτων και επικύρωση πεδίου καθώς γράφετε ερωτήματα GraphQL.

Δημιουργήστε ένα αρχείο ρύθμισης παραμέτρων στη ρίζα του έργου σας:

Χρήση στατικού αρχείου σχήματος

Χρησιμοποιήστε την ακόλουθη ρύθμιση παραμέτρων εάν έχετε εξαγάγει το σχήμα ως στατικό αρχείο:

Δημιουργία .graphqlrc.yml:

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

Χρήση απομακρυσμένου τελικού σημείου

Χρησιμοποιήστε την ακόλουθη διαμόρφωση εάν προτιμάτε να λάβετε το σχήμα απευθείας από το τελικό σημείο του GraphQL API:

Δημιουργία graphql.config.yml:

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

Επιλογές διαμόρφωσης

schema: Καθορίζει τη θέση του σχήματος GraphQL
έγγραφα: Ορίζει ποια αρχεία θα πρέπει να έχουν υποστήριξη IntelliSense

Μετά τη δημιουργία του αρχείου ρύθμισης παραμέτρων, επανεκκινήστε τον κώδικα του Visual Studio για να βεβαιωθείτε ότι οι αλλαγές θα τεθούν σε ισχύ.

Βήμα 5: Ρύθμιση δημιουργίας κώδικα

Η δημιουργία κώδικα GraphQL δημιουργεί αυτόματα έντονα δακτυλογραφημένες διεπαφές TypeScript και άγκιστρα React από το σχήμα και τις λειτουργίες σας, μειώνοντας τα σφάλματα και βελτιώνοντας την αποτελεσματικότητα της ανάπτυξης. Ο πρωταρχικός σκοπός του είναι να ενισχύσει την ασφάλεια των τύπων και να εξορθολογίσει την ανάπτυξη σε έργα GraphQL, ιδιαίτερα όταν εργάζεστε με έντονα δακτυλογραφημένες γλώσσες όπως το TypeScript.

Δημιουργία διαμόρφωσης codegen

Επιλογή στατικού αρχείου

Εάν εξαγάγατε το σχήμα ως στατικό αρχείο, δημιουργήστε codegen.yml στη ρίζα του έργου σας:

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

Επιλογή απομακρυσμένου τελικού σημείου

Εάν χρησιμοποιείτε την προσέγγιση απομακρυσμένου τελικού σημείου, δημιουργήστε codegen.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

Ανάλυση διαμόρφωσης

schema: Διαδρομή προς το αρχείο σχήματος ή το απομακρυσμένο τελικό σημείο
έγγραφα: Μοτίβο σφαιριδίων για τον εντοπισμό αρχείων λειτουργίας GraphQL
δημιουργεί: Καθορίζει το αρχείο εξόδου για τον παραγόμενο κώδικα
plugins: Καθορίζει τον κώδικα που θα δημιουργηθεί (τύποι TypeScript και άγκιστρα React Apollo)

Προσθήκη δέσμης ενεργειών codegen

Προσθέστε το σενάριο δημιουργίας κώδικα στο package.json αρχείο στον κατάλογο του έργου σας (αυτό το αρχείο συμπεριλήφθηκε όταν κλωνοποιήσατε το αποθετήριο στο Βήμα 2):

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

Βήμα 6: Γράψτε λειτουργίες GraphQL

Δημιουργήστε .graphql αρχεία στον κατάλογό σας src/operations για να ορίσετε τα ερωτήματα και τις μεταλλάξεις σας. Το IntelliSense παρέχει αυτόματη συμπλήρωση και επικύρωση.

Παραδείγματα ερωτημάτων

Δημιουργήστε src/operations/queries.graphql και εισαγάγετε τα ακόλουθα ερωτήματα:

Ακολουθεί ένα δείγμα ερωτήματος για την ανάκτηση δεδομένων πελατών:

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

Ακολουθεί ένα παράδειγμα μετάλλαξης:

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

Βήμα 7: Δημιουργήστε τύπους και άγκιστρα

Εκτελέστε την εντολή δημιουργίας κώδικα για να δημιουργήσετε τύπους TypeScript και React hooks:

npm run codegen

Μετά την επιτυχή ολοκλήρωση, έχετε τον παραγόμενο κώδικα που src/generated/graphql.tsx περιέχει:

Διεπαφές TypeScript για όλους τους τύπους GraphQL
Ισχυρά δακτυλογραφημένα άγκιστρα React για κάθε λειτουργία
Ορισμοί τύπου εισόδου και εξόδου

Βήμα 8: Χρησιμοποιήστε τον κώδικα που δημιουργήθηκε στα στοιχεία του React

Εισαγάγετε και χρησιμοποιήστε τα άγκιστρα που δημιουργούνται στα στοιχεία React, για παράδειγμα:

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: Ρύθμιση παραμέτρων ελέγχου ταυτότητας

Ρυθμίστε τις παραμέτρους του ελέγχου ταυτότητας Microsoft Entra ID για την εφαρμογή σας:

Δημιουργήστε μια εφαρμογή Microsoft Entra ακολουθώντας την ενότητα Δημιουργία εφαρμογής Microsoft Entra στο Connect applications to Fabric API for GraphQL.
Ενημερώστε το authConfig.ts αρχείο στο έργο σας με τις απαιτούμενες παραμέτρους:

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

Για το πλήρες αρχείο ρυθμίσεων, ανατρέξτε στο δείγμα authConfig.ts στο αποθετήριο.

Βήμα 10: Εκτελέστε την εφαρμογή σας

Ξεκινήστε τον διακομιστή ανάπτυξης:

npm run dev

Η εφαρμογή σας εκκινείται στο πρόγραμμα περιήγησης στη διεύθυνση http://localhost:3000. Θα σας ζητηθεί να συνδεθείτε με τα διαπιστευτήριά σας Microsoft για να αποκτήσετε πρόσβαση στα δεδομένα του GraphQL API. Μετά τον επιτυχή έλεγχο ταυτότητας, θα δείτε τα δεδομένα πελατών από τον πίνακα της SalesLT.Customer βάσης δεδομένων Fabric SQL να εμφανίζονται στην εφαρμογή React.

Ανάδραση

Ήταν χρήσιμη αυτή η σελίδα;

Last updated on 2026-01-20