Megosztás:

Fabric API a GraphQL-szerkesztőhöz

A GraphQL-hez készült Fabric API grafikus, böngészőn belüli GraphQL-fejlesztési környezetet biztosít, amely lehetővé teszi, hogy egy interaktív játszótér a GraphQL-lekérdezések és -mutációk élő eredményeit írja, tesztelje és tekintse meg.

A szerkesztő megnyitásához nyissa meg a GraphQL API-elemet a munkaterületén a Fabricben, és válassza a Lekérdezés lehetőséget a portál képernyőjének bal alsó sarkában.

Képernyőkép arról, hogy hol jelenik meg a Lekérdezés lehetőség a Háló képernyő bal alsó sarkában.

Írja be és hajtsa végre a GraphQL-lekérdezéseket közvetlenül a Lekérdezés lapon. Az Intellisense funkciói billentyűparancsokkal érhetők el: CTRL + Szóköz (Windows) vagy Command + Space (macOS). Válassza a Futtatás lehetőséget a lekérdezés végrehajtásához és az adatforrás adatainak lekéréséhez.

Képernyőkép az API-szerkesztő képernyőjéről, amelyen a Lekérdezés lap Futtatás, Lekérdezés változók és Eredmények panelre van osztva.

Kód létrehozása

A kívánt GraphQL-művelet tesztelése és prototípusa után az API-szerkesztő létrehoz egy python- vagy Node.js kódot a szerkesztőben végrehajtott lekérdezés vagy mutáció alapján. A létrehozott kódot helyileg futtathatja tesztelési célokra, és újra felhasználhatja annak egy részét az alkalmazásfejlesztési folyamat során.

Fontos

A létrehozott kód interaktív böngészőbeli hitelesítő adatokat használ, és csak tesztelési célokra használható. Éles környezetben mindig regisztráljon egy alkalmazást a Microsoft Entra-ban, és használja a megfelelő client_id és hatóköröket. Az Connect Applications oldalon találhat egy teljes körű példát mintakóddal.

Első lépésként hajtsa végre a lekérdezést, válassza a Kód létrehozása gombot, és ennek megfelelően válassza ki a nyelvet:

Képernyőkép az API-szerkesztő képernyőről, amely bemutatja, hogyan hozhat létre kódbeállítást.

Ezután átmásolhatja a létrehozott kódot, és fájlként mentheti egy helyi mappába. A választott nyelvtől függően kövesse az alábbi egyszerű lépéseket a helyi teszteléshez:

Python

  1. Hozzon létre egy virtuális környezetet a parancs futtatásával python -m venv .venv.

  2. Aktiválja a venv következőt: futtatás .venv\Scripts\activate vagy source .venv/bin/activate.

  3. Telepítse a szükséges függőséget a futtatással pip install azure.identity.

  4. Hajtsa végre a kódot a következővel python <filename.py>: .

Node.JS

  1. A mentett fájllal megegyező mappában hozzon létre egy package.json fájlt a következő tartalommal:

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

  2. Futtassa npm install --save @azure/identity vagy hasonló parancsot a kiválasztott csomagkezelőben az identitástár legújabb verziójának telepítéséhez.

  3. Hajtsa végre a kódot a következővel node <filename>.js: .

Lekérdezések és mutációk fejlesztése

Tekintse át ezt a rövid GraphQL-sémát. Egyetlen Post típust határoz meg lekérdezésekkel egyetlen bejegyzés olvasásához vagy az összes bejegyzés listázásához, valamint a bejegyzések létrehozásához, frissítéséhez vagy törléséhez szükséges mutációkat, amelyek támogatják az összes CRUDL-használati esetet (létrehozás, olvasás, frissítés, törlés, lista).

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

Olvassa el a GraphQL-en keresztül közzétett adatokat a sémában definiált lekérdezések használatával. A getPost lekérdezés az alábbi példához hasonlóan néz ki.

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

Válasz:

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

Használjon mutációkat, például createPost adatokat írjon, és hozzon létre egy bejegyzést a szükséges paraméterekkel.

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

Válasz:

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

Lekérdezési változók

A Lekérdezés lap jobb oldalán található Lekérdezés változók panel használatával paramétereket adhat át változóként a lekérdezéseknek vagy mutációknak. A változók más programozási nyelvek változóihoz hasonlóan működnek. A rendszer minden változót egy névvel deklarál, amely a benne tárolt érték elérésére szolgál. Az előző mutációs példában kissé módosítja a lekérdezési változók használatára.

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

Definiáljon változókat a panelen az alábbi példával.

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

A változók tisztábbá teszik a mutációs kódot, könnyebben olvashatók, tesztelhetők és módosíthatók.

Kapcsolódó tartalom

  • Last updated on