GraphQL 編輯器的 Fabric API

適用於 GraphQL 的 Fabric API 提供圖形化的瀏覽器內 GraphQL 開發環境，這是一個互動式平台，讓您撰寫、測試及查看 GraphQL 查詢和變動的即時結果。

若要移至編輯器，請從 Fabric 中的工作區開啟 GraphQL 專案的 API，然後選取入口網站畫面左下角的 [查詢 ]。

您可以直接在 [查詢] 索引卷標上輸入及執行 GraphQL 查詢。您可以使用鍵盤快捷方式來使用 Intellisense 功能：CTRL + 空格鍵（Windows），或命令 + 空間（macOS）。 選取 [ 執行 ] 以執行查詢，並據以從數據源擷取數據。

產生程式碼

測試並製作所需 GraphQL 作業的原型之後，API 編輯器就可以根據編輯器中執行的查詢或突變，產生未定案 Python 或Node.js程序代碼。 您可以在本機執行產生的程式代碼，以進行測試，並在應用程式開發程式中重複使用部分程序代碼。

重要

產生的程式代碼會使用互動式瀏覽器認證，而且應該僅用於測試目的。 在生產過程中，請一律在 Microsoft Entra 中註冊應用程式，並使用適當的 client_id 和權限範圍。 您可以在連線應用程式找到具有範例程式碼的端對端範例。

若要開始使用，請執行查詢，選取 [ 產生程序代碼 ] 按鈕，並據此選擇語言：

然後，您可以複製產生的程式代碼，並將其儲存為本機資料夾中的檔案。 視選擇的語言而定，請遵循簡單的步驟在本機測試：

Python

1. 使用 命令建立虛擬環境 python -m venv .venv
2. 使用.venv\Scripts\activate或source .venv/bin/activate啟動venv
3. 使用命令安裝必要的相依性 pip install azure.identity
4. 執行程式碼 python <filename.py>

Node.JS

1. 在您儲存的檔案所在的相同資料夾中，使用 package.json 下列內容建立檔案：

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

2. 在您選擇的套件管理員中執行npm install --save @azure/identity或類似的命令，以安裝最新版的身分識別庫。
3. 使用 node <filename>.js 執行代碼

查詢和變動的開發

請檢閱下列簡短 GraphQL 結構描述，其會定義具有查詢的單一 Post 類型，以讀取單一文章或列出所有文章。 它也會定義變動來建立、更新或刪除支援所有 CRUDL (建立、讀取、更新、刪除、清單) 使用案例的文章。

type Post {
  id: ID!
  title: String!
  content: String!
  author: String!
  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
}

您可以使用結構描述中定義的任何查詢，讀取透過 GraphQL 公開的資料。 getPost 查詢應該看起來如下範例所示。

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

回應：

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

使用類似 createPost 的變動來寫入資料，以建立具有必要參數的文章。

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

回應：

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

查詢變數

使用 [查詢] 索引標籤右側的 [查詢變數] 窗格，將任何參數當做變數傳遞至您的查詢或變動。 變數的運作方式與任何其他程式設計語言中的變數相同。 每個變數都必須以用來存取儲存於其中之值的名稱來宣告。 使用先前的變動範例，您可以稍微加以修改以使用查詢變數。

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

如下列範例所示，在窗格中定義變數。

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

變數可讓變動程式碼更簡潔且更容易讀取、測試及修改參數。

相關內容

• 更多查詢和變動範例
• 用於 GraphQL 結構描述檢視和結構探索器的 Fabric API