แชร์ผ่าน


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

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

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

ภาพหน้าจอแสดงตําแหน่งที่ตัวเลือก Query ปรากฏที่มุมล่างซ้ายของหน้าจอ 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": {}
    }
    
  2. เรียกใช้ npm install --save @azure/identity หรือคําสั่งที่คล้ายกันในตัวจัดการแพคเกจที่คุณเลือกเพื่อติดตั้งไลบรารีข้อมูลประจําตัวเวอร์ชันล่าสุด

  3. เรียกใช้โค้ดด้วย node <filename>.js.

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

ตรวจสอบสคีมา GraphQL แบบสั้นนี้ กําหนดประเภทเดียว Post พร้อมแบบสอบถามเพื่ออ่านโพสต์เดียวหรือแสดงรายการโพสต์ทั้งหมด และการกลายพันธุ์เพื่อสร้าง อัปเดต หรือลบโพสต์ ซึ่งรองรับกรณีการใช้งาน CRUDL (สร้าง อ่าน อัปเดต ลบ รายการ) ทั้งหมด

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

อ่านข้อมูลที่เปิดเผยผ่าน 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"
}

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