ทดลอง GraphQL Playground
เขียน ทดสอบ และ debug GraphQL queries ในเบราว์เซอร์ รองรับ query, mutation, variables, headers, schema introspection และ validation ฟรี
Loading tool...
ทดลอง GraphQL Playground คืออะไร?
GraphQL Playground คือสภาพแวดล้อมแบบโต้ตอบสำหรับพัฒนา GraphQL ช่วยให้คุณเขียน ตรวจสอบ และส่ง GraphQL queries ไปยัง API endpoint ใดก็ได้จากเบราว์เซอร์โดยตรง ไม่ต้องติดตั้ง CLI หรือโปรแกรมเพิ่ม สามารถสำรวจ API schema ส่ง variables และ headers และดูผลลัพธ์แบบ real time ได้
ประโยชน์หลัก
- ทดสอบ GraphQL APIs โดยไม่ต้องติดตั้งซอฟต์แวร์
- ตรวจสอบ query syntax ก่อนส่ง request
- สำรวจ API schema ด้วย introspection
- Debug queries พร้อม formatted JSON responses
- ใช้ได้กับทุก GraphQL endpoint ที่รองรับ CORS
กรณีการใช้งาน
- •นักพัฒนา Frontend ที่ต้องการทดสอบ API responses
- •ทีม API ที่ debug schema changes
- •การเรียนรู้ GraphQL ผ่าน public APIs
- •สำรวจ API ก่อนเชื่อมต่อจริง
- •ตรวจสอบ query syntax แบบรวดเร็ว
วิธีใช้ GraphQL Playground
- กรอก endpoint URL: วาง GraphQL endpoint URL ของคุณ ค่าเริ่มต้นใช้ Countries API สาธารณะ (countries.trevorblades.com)
- เขียน query: พิมพ์ GraphQL query หรือ mutation ในตัวแก้ไข กด Validate เพื่อตรวจสอบ syntax ก่อนส่ง
- เพิ่ม variables และ headers: ขยายแผง Variables และ Headers เพื่อส่ง JSON variables หรือ authentication tokens (ไม่บังคับ)
- Execute และดูผล: กด Execute เพื่อส่ง request ผลลัพธ์จะแสดงเป็น JSON ที่จัดรูปแบบแล้ว กด Schema เพื่อสำรวจ API
คุณสมบัติหลัก
- ส่ง GraphQL queries ไปยัง endpoint ที่รองรับ CORS ได้
- รองรับ query, mutation และ subscription syntax แบบเต็ม
- ส่ง variables และ custom headers พร้อม request ได้
- Schema introspection — สำรวจ types และ fields อัตโนมัติ
- ตรวจสอบ syntax และจัดรูปแบบ query อัตโนมัติ
คำถามที่พบบ่อย
GraphQL Playground คืออะไร?
GraphQL Playground คือเครื่องมือบนเบราว์เซอร์สำหรับเขียน ทดสอบ และ debug GraphQL queries กับ GraphQL API endpoint ใดก็ได้ มี query editor, variables panel, headers support และ schema introspection
ต้องติดตั้งอะไรไหม?
ไม่ต้อง ทุกอย่างรันในเบราว์เซอร์ เพียงกรอก GraphQL endpoint URL เขียน query แล้วกด Execute ใช้ได้กับทุก GraphQL API ที่รองรับ CORS
ทำไม request ถึง error CORS?
เบราว์เซอร์บล็อก cross-origin requests ถ้า API server ไม่ส่ง CORS headers ให้ใช้ public APIs เช่น countries.trevorblades.com สำหรับทดสอบ หรือตั้งค่า server ให้ส่ง Access-Control-Allow-Origin headers
ใช้ variables และ authentication headers ได้ไหม?
ได้ ขยายแผง Variables เพื่อส่ง JSON variables (เช่น {"id": "123"}) และแผง Headers เพื่อเพิ่ม authentication tokens หรือ custom headers ในรูปแบบ JSON object