แชร์ผ่าน


Fabric API สําหรับตัวแก้ไข GraphQL

Fabric API สําหรับ GraphQL มีสภาพแวดล้อมการพัฒนา GraphQL แบบกราฟิกในเบราว์เซอร์ ซึ่งช่วยให้สามารถเขียน ทดสอบ และดูผลลัพธ์แบบสดของคิวรี GraphQL และกลายพันธุ์ของคุณได้

หากต้องการไปที่ตัวแก้ไข ให้เปิด API สําหรับรายการ GraphQL ใน Fabric และเลือก คิวรี ที่มุมล่างซ้ายของหน้าจอพอร์ทัลของคุณ

สกรีนช็อตแสดงตําแหน่งที่ตัวเลือกคิวรีปรากฏที่มุมล่างซ้ายของหน้าจอ Fabric

คุณสามารถพิมพ์และดําเนินการคิวรี GraphQL ได้โดยตรงบนแท็บ คิวรี ความสามารถของ Intellisense จะพร้อมใช้งานกับแป้นพิมพ์ลัด: CTRL + Space (Windows) หรือ Command + Space (macOS) เลือก เรียกใช้ เพื่อดําเนินการคิวรีและดึงข้อมูลตามจากแหล่งข้อมูล

ภาพหน้าจอของหน้าจอตัวแก้ไข API ซึ่งมีแท็บคิวรีซึ่งแบ่งออกเป็นบานหน้าต่างเรียกใช้ตัวแปรคิวรีและผลลัพธ์

สร้างรหัส

เมื่อคุณทดสอบและต้นแบบการดําเนินการ GraphQL ที่ต้องการแล้ว ตัวแก้ไข API สามารถสร้างโค้ดต้นแบบ Python หรือ Node.js ตามคิวรีหรือการกลายพันธุ์ที่ดําเนินการในตัวแก้ไข คุณสามารถเรียกใช้รหัสที่สร้างขึ้นภายในเครื่องเพื่อวัตถุประสงค์ในการทดสอบและนําส่วนกลับมาใช้ใหม่ในกระบวนการพัฒนาแอปพลิเคชัน

สำคัญ

โค้ดที่สร้างขึ้นใช้ข้อมูลประจําตัวของเบราว์เซอร์แบบโต้ตอบ และควรใช้สําหรับวัตถุประสงค์ในการทดสอบเท่านั้น ในการผลิต ให้ลงทะเบียนแอปพลิเคชันใน Microsoft Entra และใช้ขอบเขตและที่เหมาะสม client_id เสมอ คุณสามารถค้นหาตัวอย่างแบบ end-to-end ด้วยรหัสตัวอย่างได้ที่เชื่อมต่อแอปพลิเคชัน

เมื่อต้องเริ่มต้นใช้งาน ดําเนินการคิวรี เลือก ปุ่มสร้างโค้ด และเลือกภาษาตาม:

สกรีนช็อตของหน้าจอตัวแก้ไข API หลังจากเปิดตัวเลือกสร้างรหัส

จากนั้นคุณสามารถคัดลอกรหัสที่สร้างขึ้นและบันทึกเป็นไฟล์ในโฟลเดอร์ภายในเครื่อง ทําตามขั้นตอนง่าย ๆ เพื่อทดสอบภายในเครื่อง ทั้งนี้ขึ้นอยู่กับภาษาของตัวเลือก:

Python
  1. สร้างสภาพแวดล้อมเสมือนด้วยคําสั่ง python -m venv .venv
  2. เปิดใช้งานการใช้ venv .venv\Scripts\activate หรือ source .venv/bin/activate
  3. ติดตั้งการขึ้นต่อกันที่จําเป็นด้วยคําสั่ง pip install azure.identity
  4. ดําเนินการโค้ดด้วย python <filename.py>
Node.JS
  1. ในโฟลเดอร์เดียวกันกับไฟล์ที่คุณบันทึก สร้าง package.json ไฟล์ที่มีเนื้อหาต่อไปนี้:
{
  "type": "module",
  "dependencies": { 
  }
}
  1. เรียกใช้ npm install --save @azure/identity หรือใช้คําสั่งที่คล้ายกันในตัวจัดการแพคเกจที่คุณเลือกเพื่อติดตั้งไลบรารีข้อมูลประจําตัวเวอร์ชันล่าสุด
  2. ดําเนินการโค้ดด้วย node <filename>.js

การพัฒนาคิวรีและการกลายพันธุ์

ตรวจทาน Schema ของ 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 โดยใช้คิวรีใด ๆ ที่กําหนดไว้ใน schema คิวรี 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"
    }

ตัวแปรทําให้รหัสการกลายพันธุ์สะอาดขึ้นและอ่าน ทดสอบ และปรับเปลี่ยนพารามิเตอร์ได้ง่ายขึ้น