Condividi tramite

API Fabric per l'editor GraphQL

L'API Fabric per GraphQL fornisce un ambiente di sviluppo GraphQL grafico all'interno del browser, che offre un playground interattivo per comporre, testare e visualizzare in tempo reale i risultati delle query e delle mutazioni GraphQL.

Per passare all'editor, aprire l'elemento API per GraphQL dall'area di lavoro in Infrastruttura e selezionare Query nell'angolo in basso a sinistra della schermata del portale.

Screenshot che mostra dove viene visualizzata l'opzione Query nell'angolo inferiore sinistro della schermata Fabric.

Digitare ed eseguire query GraphQL direttamente nella scheda Query . Le funzionalità di IntelliSense sono disponibili con una scelta rapida da tastiera: CTRL + Spazio (Windows) o Comando + Spazio (macOS). Selezionare Esegui per eseguire la query e recuperare i dati dall'origine dati.

Screenshot della schermata dell'editor dell'API, che mostra una scheda Query suddivisa nei riquadri Esegui, Variabili della query e Risultati.

Genera codice

Dopo il test e la creazione di prototipi dell'operazione GraphQL desiderata, il codice boilerplate Python o Node.js viene generato dall'editor dell'API in base alla query o alla mutazione eseguita nell'editor. È possibile eseguire il codice generato localmente a scopo di test e riutilizzarne parti nel processo di sviluppo dell'applicazione.

Important

Il codice generato usa credenziali interattive del browser e deve essere usato solo a scopo di test. Nell'ambiente di produzione, bisogna registrare sempre un'applicazione in Microsoft Entra e usare gli ambiti appropriati e client_id. È possibile trovare un esempio end-to-end con codice di esempio in Connect Applications (Connetti applicazioni).

Per iniziare, eseguire una query, selezionare il pulsante Genera codice e scegliere il linguaggio di conseguenza:

Screenshot della schermata dell'editor dell'API che mostra l'opzione come generare codice.

È quindi possibile copiare il codice generato e salvarlo come file in una cartella locale. A seconda della lingua scelta, seguire questi semplici passaggi per eseguire il test in locale:

Python

  1. Creare un ambiente virtuale eseguendo il comando python -m venv .venv.

  2. Attivare venv eseguendo .venv\Scripts\activate o source .venv/bin/activate.

  3. Installare la dipendenza richiesta eseguendo pip install azure.identity.

  4. Eseguire il codice con python <filename.py>.

Node.JS

  1. Nella stessa cartella del file salvato creare un package.json file con il contenuto seguente:

    {
  "type": "module",
  "dependencies": {}
}

  2. Eseguire npm install --save @azure/identity o un comando simile nella gestione pacchetti scelto per installare la versione più recente della libreria di identità.

  3. Eseguire il codice con node <filename>.js.

Sviluppo di query e mutazioni

Esaminare questo breve schema GraphQL. Definisce un singolo Post tipo con query per leggere un singolo post o elencare tutti i post e le mutazioni per creare, aggiornare o eliminare post, supportando tutti i casi d'uso CRUDL (creazione, lettura, aggiornamento, eliminazione, elenco).

{
  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
  }
}

Leggere i dati esposti tramite GraphQL usando qualsiasi query definita nello schema. La getPost query ha un aspetto simile a questo esempio.

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

Response:

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

Usare mutazioni come createPost per scrivere dati e creare un post con i parametri richiesti.

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

Response:

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

Variabili di query

Usare il riquadro Variabili di query sul lato destro della scheda Query per passare parametri come variabili alle query o alle mutazioni. Le variabili funzionano come variabili in altri linguaggi di programmazione. Ogni variabile viene dichiarata con un nome usato per accedere al valore archiviato. Usando l'esempio di mutazione precedente, è possibile modificarlo leggermente per usare le variabili di query.

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

Definire le variabili nel riquadro usando l'esempio seguente.

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

Le variabili rendono il codice di mutazione più pulito, più facile da leggere, testare e modificare.

Contenuti correlati

  • Last updated on