Softonic

เครื่องสร้าง GraphQL Query

ขั้นตอน 1 / 2
อาร์กิวเมนต์
สร้างคำค้นหา

การเขียน GraphQL operation ด้วยมือหมายถึงต้องรักษาวงเล็บปีกกา อาร์กิวเมนต์ และการเยื้องให้ถูกต้อง เครื่องสร้างนี้จะประกอบเอกสารให้คุณ เลือก query, mutation หรือ subscription ตั้งชื่อ operation กำหนดฟิลด์ราก เพิ่มอาร์กิวเมนต์ และระบุฟิลด์ที่ต้องการ ผลลัพธ์คือ operation ที่จัดรูปแบบแล้ว วางลง Apollo, urql หรือ GraphiQL ได้โดยตรง

วิธีสร้าง GraphQL operation

  1. 1

    เลือกประเภท operation

    เลือก query, mutation หรือ subscription จากเมนูแบบเลื่อนลง ซึ่งกำหนดประเภท operation ที่เซิร์ฟเวอร์จะทำงาน

  2. 2

    ตั้งชื่อ operation

    ตั้งชื่อเช่น GetUser เพื่อให้เซิร์ฟเวอร์บันทึกและเก็บแคชได้ ชื่อเป็นตัวเลือก ไม่ตั้งก็ได้

  3. 3

    กำหนดฟิลด์ราก

    พิมพ์ฟิลด์ที่ต้องการเรียก เช่น user, createPost หรือ orderUpdated

  4. 4

    เพิ่มอาร์กิวเมนต์

    เพิ่มคู่คีย์-ค่า เช่น id: "123" หรือ id: $id แถวที่คีย์ว่างจะถูกข้าม

  5. 5

    ระบุฟิลด์และคัดลอก

    พิมพ์หนึ่งฟิลด์ต่อบรรทัด สร้าง query แล้วคัดลอกเอกสารที่จัดรูปแบบแล้วไปยังคลิปบอร์ด

การทำงานกับเอกสาร GraphQL

เอกสาร GraphQL คือชุดของ operation หนึ่งรายการขึ้นไป บวก fragment ใด ๆ ที่อ้างถึง แต่ละ operation ตั้งชื่อ root field จาก type Query, Mutation หรือ Subscription และเซิร์ฟเวอร์แก้ไข selection set ที่คุณร้องขอ เครื่องสร้างเขียนข้อความของ operation ให้คุณ แต่ไม่รู้จัก schema ของคุณ ดังนั้นก่อนรัน operation ให้ตรวจชื่อฟิลด์และอาร์กิวเมนต์ทุกชื่อเทียบกับ API ของคุณ

กายวิภาคของ operation

ส่วน จุดประสงค์ ตัวอย่าง
ประเภท operation Query, mutation หรือ subscription query, mutation, subscription
ชื่อ operation ใช้สำหรับ caching และ log GetUserById
อาร์กิวเมนต์ ค่าที่ส่งไปยังฟิลด์ราก user(id: "123")
ชุดการเลือก (selection set) ฟิลด์และการเลือกที่ซ้อนกัน { user(id: "123") { name posts { title } } }
ตัวแปร อินพุตที่มี type ประกาศไว้ร่วมกับชื่อ operation query GetUser($id: ID!) { user(id: $id) { name } }

กับดักที่พบบ่อย

  • ตัวแปรที่ต้องระบุ ลงท้ายด้วย ! การลืมบนอาร์กิวเมนต์ที่ระบุ NonNull ใน schema ผลิตข้อผิดพลาดการตรวจสอบก่อน resolver จะรัน
  • อาร์กิวเมนต์แบบข้อความต้องมีเครื่องหมายคำพูด ค่าเช่น 123 เป็นตัวเลข ส่วนค่าข้อความต้องเขียน "123" ด้วยเครื่องหมายคำพูดคู่ในบรรทัดอาร์กิวเมนต์
  • Union และ interface type ต้องการ inline fragment ... on TypeName เพื่ออ่านฟิลด์เฉพาะ type
  • การตั้ง alias เป็นข้อบังคับเมื่อคุณร้องขอฟิลด์เดียวกันสองครั้งด้วยอาร์กิวเมนต์ต่างกัน เช่น today: stats(period: DAY) และ week: stats(period: WEEK)
  • Connection (สเปก Relay) เปิด edges { node { ... } } และ pageInfo { endCursor hasNextPage } การข้ามอันใดอันหนึ่งทำให้การแบ่งหน้าพัง

เคล็ดลับ

  • คง operation ให้เล็กและตั้งชื่อเพื่อให้ Apollo Client cache ทีละรายการได้
  • ส่งค่าที่เปลี่ยนไปเป็นตัวแปรแทน literal เพื่อให้เซิร์ฟเวอร์แยกวิเคราะห์เอกสารครั้งเดียวแล้วนำกลับมาใช้ ประกาศตัวแปรไว้ข้างชื่อ operation เช่น query GetUser($id: ID!)
  • หากฟิลด์หนึ่งต้องใช้หลายอาร์กิวเมนต์ ให้เขียนในบรรทัดอาร์กิวเมนต์เดียวคั่นด้วยเครื่องหมายจุลภาค เช่น filter: { status: ACTIVE } เป็นค่า
  • เครื่องสร้างส่งออกข้อความตามที่คุณตั้งค่าทุกประการ หาก operation ล้มเหลว ให้เปรียบเทียบชื่อฟิลด์ของคุณกับ schema ปัจจุบันก่อน

คำถามที่พบบ่อย

ไม่ เครื่องสร้างจัดรูปแบบข้อความที่คุณป้อนเท่านั้น ไม่มี endpoint ให้เรียกและไม่ต้องใช้ schema เพียงกรอกส่วนต่าง ๆ ของ operation แล้วเครื่องสร้างจะประกอบเอกสารให้คุณ

ได้ ใช้เมนูแบบเลื่อนลงของ operation เพื่อสลับระหว่าง query, mutation และ subscription ที่เหลือทำงานเหมือนกันหมด ทั้งชื่อ ฟิลด์ราก อาร์กิวเมนต์ และฟิลด์

เพิ่มแถวในส่วนอาร์กิวเมนต์ คีย์คือชื่ออาร์กิวเมนต์และค่าคือสิ่งที่คุณส่ง เช่น id: “123” หรือ id: $id แถวที่คีย์ว่างจะถูกข้าม หากพิมพ์ตัวแปรอย่าง $id ให้ประกาศเองข้างชื่อ operation เช่น query GetUser($id: ID!)

เครื่องสร้างส่งออกข้อความตามที่คุณพิมพ์ทุกประการ ข้อผิดพลาดนี้มักหมายถึงชื่อฟิลด์หรืออาร์กิวเมนต์ไม่ตรงกับ schema ของเซิร์ฟเวอร์ ให้เปรียบเทียบฟิลด์รากและชื่อฟิลด์ทั้งหมดกับ API แล้วแก้ตัวสะกด

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องสร้างตัวอักษรสุ่ม

สร้างตัวอักษร A-Z แบบสุ่ม เลือกจำนวน ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก หรือแบบผสม แล้วใช้กับเกม โจทย์ หรือกิจกรรมในห้องเรียน

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig ด้วยกฎสไตล์และขนาดการเยื้อง การจบบรรทัด ชุดอักขระ และช่องว่างของคุณ เพื่อให้การจัดรูปแบบสอดคล้องกันในทุก IDE และโปรแกรมแก้ไข

เครื่องมือนี้มีให้บริการในภาษาอื่น