Freigeben über


Fabric API für GraphQL-Editor

Die Fabric-API für GraphQL bietet eine grafische GraphQL-Entwicklungsumgebung, die es einem interaktiven Playground ermöglicht, die Liveergebnisse Ihrer GraphQL-Abfragen und -Mutationen zu verfassen, zu testen und anzuzeigen.

Um zum Editor zu wechseln, öffnen Sie die API für GraphQL-Element aus dem Arbeitsbereich in Fabric, und wählen Sie "Abfrage " in der unteren linken Ecke des Portalbildschirms aus.

Screenshot, der zeigt, wo die Abfrageoption in der unteren linken Ecke des Fabric-Bildschirms angezeigt wird.

Geben Sie GraphQL-Abfragen direkt auf der Registerkarte "Abfrage " ein, und führen Sie sie aus. IntelliSense-Funktionen stehen mit einer Tastenkombination zur Verfügung: STRG+ LEERTASTE (Windows) oder BEFEHL+LEERTASTE (macOS). Wählen Sie "Ausführen" aus, um die Abfrage auszuführen und Daten aus der Datenquelle abzurufen.

Screenshot des API-Editor-Bildschirms, auf dem eine Registerkarte

Generieren von Code

Nach dem Testen und Prototyping des gewünschten GraphQL-Vorgangs generiert der API-Editor Vorlagen für Python- oder Node.js-Code, basierend auf der Abfrage oder Mutation, die im Editor ausgeführt wurde. Sie können den generierten Code lokal zu Testzwecken ausführen und Teile davon im Anwendungsentwicklungsprozess wiederverwenden.

Wichtig

Der generierte Code verwendet interaktive Browseranmeldeinformationen und sollte nur zu Testzwecken verwendet werden. Registrieren Sie in der Produktion immer eine Anwendung in Microsoft Entra, und verwenden Sie die entsprechende client_id und Bereiche. Du findest ein End-to-End-Beispiel mit Beispielcode unter Connect Applications.

Führen Sie zunächst eine Abfrage aus, wählen Sie die Schaltfläche "Code generieren " aus, und wählen Sie die Sprache entsprechend aus:

Screenshot des API-Editor-Bildschirms mit der Vorgehensweise zum Generieren von Code.

Anschließend können Sie den generierten Code kopieren und als Datei in einem lokalen Ordner speichern. Führen Sie je nach ausgewählter Sprache die folgenden einfachen Schritte aus, um lokal zu testen:

Python

  1. Erstellen Sie eine virtuelle Umgebung, indem Sie den Befehl python -m venv .venvausführen.

  2. Aktivieren Sie venv, indem Sie .venv\Scripts\activate oder source .venv/bin/activate ausführen.

  3. Installieren Sie die erforderliche Abhängigkeit, indem Sie pip install azure.identity ausführen.

  4. Führen Sie den Code mit python <filename.py> aus.

Node.JS

  1. Erstellen Sie im selben Ordner wie die gespeicherte Datei eine package.json-Datei mit dem folgenden Inhalt:

    {
      "type": "module",
      "dependencies": {}
    }
    
  2. Führen Sie npm install --save @azure/identity oder einen ähnlichen Befehl in Ihrem ausgewählten Paketmanager aus, um die neueste Version der Identitätsbibliothek zu installieren.

  3. Führen Sie den Code mit node <filename>.js aus.

Entwicklung von Abfragen und Mutationen

Überprüfen Sie dieses kurze GraphQL-Schema. Er definiert einen einzelnen Post Typ mit Abfragen, um einen einzelnen Beitrag zu lesen oder alle Beiträge auflisten und Mutationen zum Erstellen, Aktualisieren oder Löschen von Beiträgen, die alle CRUDL-Anwendungsfälle (Erstellen, Lesen, Aktualisieren, Löschen, Listen) unterstützen.

{
  type Post {
    id: ID!
    published: Boolean
  }

  type Query {
    getPost(id: ID!): Post
    getAllPosts: [Post]
  }

  type Mutation {
    createPost(title: String!, content: String!, author: String!): Post
    updatePost(id: ID!, title: String, content: String, author: String, published: Boolean): Post
    deletePost(id: ID!): Boolean
  }
}

Lesen Sie die Daten, die über GraphQL verfügbar gemacht werden, mithilfe einer abfrage, die im Schema definiert ist. Die getPost Abfrage sieht wie in diesem Beispiel aus.

query MyQuery {
  getPost(id: "1234") {
    title
    content
    author
  }
}

Antwort:

{
  "data": {
    "getPost": {
      "title": "First Post",
      "content": "This is my first post.",
      "author": "Jane Doe"
    }
  }
}

Verwenden Sie Mutationen wie createPost, um Daten zu schreiben und einen Beitrag mit den erforderlichen Parametern zu erstellen.

mutation MyMutation {
  createPost(title: "Second post", content: "This is my second post", author: "Jane Doe", published: false) {
    id
    title
    content
    author
  }
}

Antwort:

{
  "data": {
    "createPost": {
      "id": "5678",
      "title": "Second Post",
      "content": "This is my second post.",
      "author": "Jane Doe"
    }
  }
}

Abfragevariablen

Verwenden Sie den Bereich "Abfragevariablen " auf der rechten Seite der Registerkarte " Abfrage ", um Parameter als Variablen an Ihre Abfragen oder Mutationen zu übergeben. Variablen funktionieren wie Variablen in anderen Programmiersprachen. Jede Variable wird mit einem Namen deklariert, der für den Zugriff auf den darin gespeicherten Wert verwendet wird. Im vorherigen Mutationsbeispiel ändern Sie es geringfügig, um Abfragevariablen zu verwenden.

mutation MyMutation ($title: String!, $content: String!, $author: String!){
  createPost(title: $title, content: $content, author: $author) {
    id
    title
    content
    author
  }
}

Definieren Sie Variablen im Fensterbereich mithilfe des folgenden Beispiels.

{
  "id": "5678",
  "title": "Second Post",
  "content": "This is my second post.",
  "author": "Jane Doe"
}

Variablen machen den Mutationscode übersichtlicher, einfacher zu lesen, zu testen und zu ändern.