ทดลอง GROQ Query
รัน Sanity GROQ query กับ JSON ที่วางเข้ามาได้ในเบราว์เซอร์ รองรับ filter, projection, order(), slice และ join ผ่าน reference พร้อมผลลัพธ์ที่จัดรูปแบบแล้วและแจ้ง syntax error ไม่ต้องมี Sanity project และไม่อัปโหลดข้อมูล
Loading tool...
ทดลอง GROQ Query คืออะไร?
GROQ Query Playground คือสภาพแวดล้อมในเบราว์เซอร์สำหรับรัน Sanity GROQ query กับ JSON ของคุณเอง โดย implement GROQ subset ที่เน้นการใช้งานจริง — filter, projection, order(), slice, arithmetic และ join ผ่าน reference — ด้วย JavaScript ล้วน ไม่ต้องตั้งค่า Sanity project และข้อมูลไม่ออกจากเครื่อง วาง dataset แล้วพิมพ์ query เพื่อดูว่า Sanity client จะคืนเอกสารใดกลับมาอย่างแม่นยำ
ประโยชน์หลัก
- ทดสอบ GROQ query ได้ทันทีโดยไม่ต้องมี Sanity project หรือ API token
- เป็นส่วนตัวก่อนอื่น: เอกสารถูก parse และ query ในเบราว์เซอร์ล้วน
- เรียน GROQ เร็วขึ้นด้วย preset query ที่ครอบคลุม pattern ใช้งานบ่อย
- syntax error ชี้ตำแหน่งตัวอักษรที่ผิด แทนที่จะเงียบไปเฉย ๆ
- คัดลอกหรือดาวน์โหลดผลลัพธ์เป็น JSON ที่จัดรูปแบบแล้ว
กรณีการใช้งาน
- •prototype GROQ query ก่อนเอาไปใส่ใน Sanity client จริง
- •debug ว่าทำไม query เดิมถึงคืนเอกสารไม่ตรงที่คาด
- •สอนเพื่อนร่วมทีมเรื่อง GROQ projection และ join ผ่าน reference
- •ตรวจว่าโครงสร้าง dataset ส่งผลต่อ query อย่างไรก่อนย้าย content
วิธีใช้ GROQ Query Playground
- วาง dataset: วาง response ของ Sanity API หรือ JSON array ของเอกสารลงในช่อง input หรือเว้นว่างไว้เพื่อใช้ dataset ตัวอย่างที่มีให้
- เขียน GROQ query: พิมพ์ query เช่น *[_type == "post"] แล้วจัดรูปผลลัพธ์ด้วย projection ผลลัพธ์จะอัปเดตทันทีขณะพิมพ์
- ลอง preset: คลิก preset ใต้ช่อง query เพื่อโหลด pattern ที่ใช้บ่อย เช่น projection, order(), slice, join ผ่าน reference และ count()
- คัดลอกหรือดาวน์โหลด: ตรวจผลลัพธ์ JSON ที่จัดรูปแบบแล้ว จากนั้นคัดลอกไปยังคลิปบอร์ดหรือดาวน์โหลดเป็นไฟล์
คุณสมบัติหลัก
- filter ด้วย ==, !=, <, <=, >, >=, in, match, && และ ||
- projection พร้อม alias และ spread รวมถึง projection บน array ที่ซ้อนอยู่
- order() หลาย sort key พร้อม subscript แบบ [n], [0...3] และ [0..3]
- join ผ่าน reference ด้วย operator -> โดย resolve กับ dataset ที่วางมา
- built-in function: count, length, defined, coalesce, select, references
- syntax error พร้อมลูกศรชี้ตำแหน่งตัวอักษรที่ผิด