พื้นฐาน GraphQL สำหรับนักพัฒนา React

REST เปิดเผยจุดปลายทางที่มีรูปแบบตายตัว: GET /users/:id จะส่งคืนออบเจ็กต์ผู้ใช้ทั้งหมด ไม่ว่าความต้องการของไคลเอ็นต์จะเป็นอย่างไร GraphQL ช่วยให้ไคลเอ็นต์ระบุฟิลด์ที่ต้องการได้อย่างแม่นยำ จึงขจัดการดึงข้อมูลเกินจำเป็นและการดึงข้อมูลไม่เพียงพอ ซึ่งต้องส่งคำขอหลายครั้ง

คิวรี GraphQL เพียงครั้งเดียวสามารถดึงข้อมูลผู้ใช้ โพสต์ของผู้ใช้ และผู้เขียนของแต่ละโพสต์ได้ภายในการเดินทางไปกลับครั้งเดียว

API ของ GraphQL ทุกแห่งกำหนดด้วยสคีมาที่เขียนด้วย SDL สคีมาจะประกาศชนิดข้อมูล ฟิลด์ และชนิดข้อมูลระดับรากสำหรับคิวรี มิวเทชัน และการสมัครรับข้อมูล ซึ่งไคลเอ็นต์สามารถดำเนินการได้

สคีมาคือสัญญาระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์ เมื่อเห็นพ้องกับสคีมาแล้ว ทีมส่วนหน้าและทีมส่วนหลังสามารถทำงานขนานกันได้

คิวรี GraphQL เลือกฟิลด์: { user(id: "1") { name email posts { title } } } ฟิลด์ซ้อนกันช่วยไล่ตามความสัมพันธ์ได้ภายในการส่งคำขอเดียว นามแฝงใช้เปลี่ยนชื่อฟิลด์: { me: user(id: "1") { name } } ส่วนย่อยช่วยนำการเลือกฟิลด์กลับมาใช้ซ้ำในหลายคิวรี

ตัวแปรทำให้คิวรีนำกลับมาใช้ซ้ำได้: query GetUser($id: ID!) { user(id: $id) { name } } พร้อมตัวแปร: { id: "1" }

แต่ละฟิลด์ในสคีมา GraphQL มีฟังก์ชันตัวแก้ไขบนเซิร์ฟเวอร์ เมื่อไคลเอ็นต์คิวรี user.name ตัวแก้ไข user จะดึงออบเจ็กต์ผู้ใช้ และตัวแก้ไข name (หรือตัวแก้ไขเริ่มต้น) จะส่งคืนฟิลด์ name

การแก้ไขระดับฟิลด์นี้ทำให้ GraphQL สามารถดึงเฉพาะข้อมูลที่ร้องขอได้อย่างแม่นยำ

หากคุณคิวรีรายการโพสต์ 100 รายการและแต่ละโพสต์มีผู้เขียน การนำไปใช้แบบตรงไปตรงมาจะส่งคำขอฐานข้อมูลแยกกัน 100 ครั้งเพื่อดึงข้อมูลผู้เขียน ปัญหา N+1 นี้ทำให้ API ของ GraphQL ทำงานช้าหากไม่มีการปรับให้เหมาะสม

DataLoader แก้ปัญหา N+1 ด้วยการรวมการค้นหาผู้เขียนทั้งหมดเป็นคำขอฐานข้อมูลเดียว โดยใช้แคชต่อคำขอและฟังก์ชันรวมกลุ่ม

Apollo Studio และ GraphQL Playground เป็นส่วนติดต่อผู้ใช้บนเบราว์เซอร์สำหรับสำรวจ GraphQL API แบบโต้ตอบ ทั้งสองสามารถเติมฟิลด์จากสคีมาให้โดยอัตโนมัติ แสดงผลลัพธ์คิวรี และแสดงเอกสารประเภทข้อมูลในบรรทัดได้

การใช้ GraphQL Playground เป็นวิธีที่เร็วที่สุดในการทำความเข้าใจ GraphQL API ที่ไม่คุ้นเคย ก่อนเขียนโค้ดฝั่งไคลเอ็นต์

GraphQL API เปิดเผยสคีมาของตนเองผ่านคิวรีตรวจสอบโครงสร้าง: { __schema { types { name } } } ไคลเอ็นต์สามารถส่งคิวรีไปยังสคีมาเองเพื่อค้นหาประเภทข้อมูล ฟิลด์ และอาร์กิวเมนต์ที่มีอยู่

เครื่องมือสร้างโค้ด เช่น graphql-codegen ใช้การตรวจสอบโครงสร้างเพื่อสร้างประเภท TypeScript ที่ตรงกับสคีมา API โดยอัตโนมัติ

มิวเทชันของ GraphQL ใช้แก้ไขข้อมูล: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } } ซับสคริปชันสร้างการเชื่อมต่อแบบคงอยู่ (โดยปกติใช้ WebSocket) และส่งการอัปเดตไปยังไคลเอ็นต์: subscription { postAdded { id title } }

ประเภทระดับรากทั้งสามประเภท (Query, Mutation, Subscription) ใช้ไวยากรณ์การเลือกฟิลด์แบบเดียวกัน

GraphQL เหมาะอย่างยิ่งกับแอปพลิเคชันที่มีความต้องการข้อมูลซับซ้อนแบบซ้อนชั้น มีไคลเอ็นต์หลายประเภท (มือถือ เว็บ TV) ที่ต้องการชุดฟิลด์แตกต่างกัน หรือมี API ที่พัฒนาอย่างรวดเร็ว ซึ่งการเลิกใช้ฟิลด์เหมาะสมกว่าการกำหนดเวอร์ชันของจุดปลายทาง

REST เรียบง่ายกว่าสำหรับ API แบบ CRUD ที่มีรูปร่างทรัพยากรแบบแบนและคาดเดาได้ รวมทั้งมีคุณสมบัติการแคช HTTP ที่ดีเยี่ยมผ่าน ETag และส่วนหัวแคช

Apollo Client เป็นไคลเอ็นต์ GraphQL ที่มีฟีเจอร์ครบถ้วนที่สุด ได้แก่ แคชแบบจัดข้อมูลให้เป็นมาตรฐาน การจัดการสถานะภายในเครื่อง ซับสคริปชัน และลิงก์จัดการข้อผิดพลาด URQL มีน้ำหนักเบากว่า โดยใช้แคชเอกสารและมี API ที่เรียบง่ายกว่า React Query ที่ใช้ร่วมกับ graphql-request เป็นแนวทางที่ง่ายที่สุดสำหรับคิวรีและมิวเทชันพื้นฐานที่ไม่ต้องการความสามารถด้านแคชขั้นสูง

ให้เลือกตามข้อกำหนดด้านแคชของคุณ: ใช้แคชแบบจัดข้อมูลให้เป็นมาตรฐานสำหรับเอนทิตีที่ใช้ร่วมกันในหลายคิวรี (Apollo) หรือใช้แคชเอกสารที่เรียบง่ายกว่าสำหรับคิวรีที่แยกจากกัน (URQL หรือ React Query)

ตัวอย่าง SDL อย่างง่าย: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! } เครื่องหมายอัศเจรีย์ระบุว่าฟิลด์นั้นไม่เป็นค่าว่าง

สคีมานี้บอกไคลเอ็นต์อย่างชัดเจนว่าแต่ละประเภทมีฟิลด์ใดบ้าง และมีคิวรีใดให้ใช้ได้ จึงทำให้สร้างโค้ดที่ปลอดภัยด้านประเภทข้อมูลได้

ในบริบทของ REST กับ GraphQL คำว่า "การดึงข้อมูลมากเกินไป" หมายถึงอะไร

GraphQL ช่วยให้ไคลเอ็นต์ร้องขอเฉพาะฟิลด์ที่ต้องการได้ (ไม่ดึงข้อมูลมากหรือน้อยเกินไป) โดยใช้ภาษาคิวรีที่กำหนดด้วยสคีมา ตัวแก้ไขจะตอบข้อมูลของแต่ละฟิลด์ ส่วน DataLoader แก้ปัญหา N+1 การตรวจสอบโครงสร้างช่วยให้สร้างประเภท TypeScript ได้โดยอัตโนมัติ Apollo Client, URQL และ React Query เป็นไคลเอ็นต์ GraphQL หลักที่ใช้ร่วมกับ React ได้

เลือก GraphQL เมื่อมีความต้องการข้อมูลซับซ้อน แบบซ้อนชั้น และรองรับไคลเอ็นต์หลายประเภท ส่วน REST เหมาะกับ CRUD ที่เรียบง่ายและมีรูปร่างข้อมูลคาดเดาได้