แนะนำ GraphiQL Client

Gato GraphQL มี GraphiQL client สำหรับใช้งานร่วมกับ GraphQL service เข้าถึงได้โดยคลิก "GraphiQL" ในเมนูของปลั๊กอิน:

GraphiQL ช่วยให้สามารถเขียน GraphQL queries รันคำสั่ง และดูผลลัพธ์ที่ได้:

​

คู่มือการใช้งาน GraphiQL client

นี่คือวิธีใช้ GraphiQL client เพื่อเขียนและรัน GraphQL query

เราเขียน GraphQL query ในแผงด้านซ้าย:

GraphiQL มีระบบ syntax highlighting สำหรับ GraphQL syntax เมื่อเริ่มเขียน query จะเห็นว่าชื่อ operation วงเล็บเปิดปิด fields, arguments, directives และ comments ต่างมีสีที่แตกต่างกัน ช่วยให้เข้าใจโครงสร้างของ query ได้ง่ายขึ้น:

เมื่อโหลดครั้งแรก GraphiQL จะดึง metadata ของ GraphQL schema ผ่าน introspection ด้วย schema metadata นี้ GraphiQL จะแนะนำตัวเลือก autocomplete ในทุกขณะที่กำลังเขียน query:

นอกจากนี้ยังสามารถดู schema metadata ผ่าน Documentation Explorer ได้ด้วย หากต้องการเปิด ให้คลิกปุ่ม "Docs":

Documentation Explorer จะปรากฏขึ้นทางด้านขวา:

เมื่อคลิกที่ชื่อ GraphQL type Documentation Explorer จะแสดงข้อมูลต่อไปนี้:

• คำอธิบายของ type
• interfaces ที่ type นั้น implement
• รายการ fields ทั้งหมด ซึ่งประกอบด้วย:
  • arguments ที่รับเข้ามา
  • return type (ซึ่งสามารถคลิกเพื่อดูรายละเอียดได้เช่นกัน)
  • คำอธิบายของ field

ในทุกขณะ เราสามารถค้นหาและดูข้อมูลของ element ใดก็ได้จาก schema:

การวางเมาส์เหนือ element ใดๆ ใน query จะแสดงข้อมูลของ element นั้น และการกด ctrl (หรือ cmd) + คลิก จะแสดงใน Documentation Explorer:

การคลิกที่แผง "Query variables" ด้านล่าง จะทำให้สามารถกรอก variables ที่จะส่งไปยัง query ในรูปแบบ JSON map ของ variable => value:

หากต้องการรัน GraphQL query ให้กดปุ่ม "Run" หรือกด ctrl (หรือ cmd) + enter:

ผลลัพธ์ของ GraphQL จะแสดงในแผงตรงกลาง:

ในแผงด้านบน มี add-ons ต่างๆ สำหรับ GraphiQL:

การคลิกปุ่ม add-on แต่ละปุ่มจะดำเนินการบางอย่าง:

• "Prettify" จัดรูปแบบ GraphQL query
• "History" แสดงรายการ queries ที่ผ่านมาล่าสุด และการคลิกที่รายการใดจะนำ query นั้นไปใส่ในตัวแก้ไข
• "Explorer" เปิดแผง GraphiQL Explorer

GraphiQL Explorer เป็น add-on ที่ยอดเยี่ยม โดยจะแสดงรายการ fields ทั้งหมด และการคลิกที่ field จะเพิ่ม field นั้นไปยัง query ในตัวแก้ไข ทำให้สามารถเขียน GraphQL query ได้ในรูปแบบ visual: