ฮุก useQuery และ useMutation

แท็กแม่แบบ gql จาก @apollo/client จะแยกวิเคราะห์สตริงคิวรี GraphQL เป็น DocumentNode ขณะโหลดโมดูล กำหนดคิวรีไว้นอกคอมโพเนนต์: const GET_USERS = gql`query GetUsers { users { id name email } }`

หมายเหตุ: ในโค้ดใช้งานจริง ให้ใช้สตริงที่ครอบด้วยเครื่องหมายอัญประกาศเดี่ยวและห่อด้วย gql ในรูปแม่แบบที่มีแท็ก แท็ก gql รองรับไวยากรณ์ลิเทอรัลแม่แบบในซอร์ส JavaScript

useQuery(GET_USERS) ส่งกลับ { loading, error, data, refetch, fetchMore, networkStatus } โดย loading จะเป็น true ระหว่างการดึงข้อมูลครั้งแรก error จะมีข้อผิดพลาด GraphQL หรือเครือข่ายที่เกิดขึ้น ส่วน data จะมีผลลัพธ์คิวรีที่ตรงกับรูปร่างของคิวรี

ตรวจสอบ loading และ error ก่อนเข้าถึง data เพื่อหลีกเลี่ยงการแสดงค่าที่เป็น null

แสดงคอมโพเนนต์โครงร่างขณะ loading เป็น true แสดงข้อความข้อผิดพลาดหากมีการกำหนด error (เข้าถึง error.message เพื่อใช้เป็นข้อความข้อผิดพลาด) และแสดงเนื้อหาจริงเฉพาะเมื่อมีการกำหนด data และ loading เป็น false

รูปแบบสามสถานะนี้ (loading / error / data) เป็นโครงสร้างมาตรฐานของคอมโพเนนต์ Apollo Client

ออบเจ็กต์ data มีโครงสร้างเหมือนกับคิวรี GraphQL สำหรับ query { users { id name } } ให้เข้าถึง data.users ซึ่งเป็นอาร์เรย์ของออบเจ็กต์ {id, name} ประเภทข้อมูล TypeScript จะตรงกันหากใช้ graphql-codegen เพื่อสร้างฮุกที่มีประเภทข้อมูล

หากไม่ใช้การสร้างโค้ด data จะมีประเภทเป็น any แต่เมื่อใช้การสร้างโค้ด useQuery จะส่งกลับข้อมูลที่มีประเภทครบถ้วนโดยอัตโนมัติ

ส่งตัวแปรเป็นอาร์กิวเมนต์ตัวที่สอง: useQuery(GET_USER, { variables: { id: userId } }) คิวรีจะทำงานใหม่โดยอัตโนมัติเมื่อ userId เปลี่ยนแปลง เช่นเดียวกับอาร์เรย์การพึ่งพาของ useEffect

Apollo Client จะแคชชุดค่าผสมที่ไม่ซ้ำกันของคิวรีกับตัวแปรแต่ละชุดแยกกัน ดังนั้น GET_USER ที่มี id: "1" และ GET_USER ที่มี id: "2" จะมีรายการแคชแยกจากกัน

ส่ง skip: true ในตัวเลือกเพื่อป้องกันไม่ให้คิวรีทำงาน: useQuery(GET_USER, { skip: !userId }) Apollo จะไม่ส่งคำขอเมื่อ skip เป็น true และ loading จะเป็น false ส่วน data จะไม่ได้กำหนดค่า

นี่เทียบเท่ากับคีย์ null ของ SWR และตัวเลือก enabled: false ของ React Query ใน Apollo

ฟังก์ชัน refetch ที่ส่งกลับโดย useQuery จะทริกเกอร์คำขอเครือข่ายโดยไม่คำนึงถึงนโยบายการดึงข้อมูล ให้เรียก refetch() หลังการกระทำของผู้ใช้ที่อาจเปลี่ยนข้อมูลบนเซิร์ฟเวอร์ เช่น เรียก refetch() หลังส่งแบบฟอร์ม

ส่งตัวแปรใหม่ให้ refetch ได้: refetch({ id: newId }) เพื่อดึงข้อมูลใหม่ด้วยพารามิเตอร์ที่แตกต่างกัน

ส่ง notifyOnNetworkStatusChange: true ในตัวเลือกเพื่อรับการอัปเดตเมื่อสถานะเครือข่ายเปลี่ยนแปลง (กำลังดึงข้อมูล กำลังดึงข้อมูลใหม่ การสำรวจเป็นระยะ และอื่น ๆ) ฟิลด์ networkStatus จะมีรหัสตัวเลขจาก enum NetworkStatus

วิธีนี้ช่วยให้แสดงตัวบ่งชี้เล็กน้อยว่า "กำลังรีเฟรช" ขณะกำลังดึงข้อมูลใหม่เบื้องหลังได้ โดยไม่ซ่อนข้อมูลปัจจุบัน

useMutation(CREATE_USER) ส่งกลับ [mutateFunction, { loading, error, data, reset }] ฟังก์ชัน mutate จะถูกเรียกเมื่อผู้ใช้ส่งแบบฟอร์ม และส่งกลับ Promise ที่มี { data, errors }

เรียก mutate({ variables: { name: 'Alice', email: 'alice@example.com' } }) เพื่อส่งข้อมูลเข้าไปยังมิวเทชัน

ส่ง onCompleted: (data) => navigate('/dashboard') และ onError: (error) => showToast(error.message) ให้กับตัวเลือกของ useMutation การเรียกกลับเหล่านี้จะทำงานหลังจากมิวเทชันเสร็จสมบูรณ์หรือถูกปฏิเสธ

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

ตัวเลือก optimisticResponse ในการเรียก mutate จะเขียนผลลัพธ์จำลองลงในแคชทันที ก่อนเซิร์ฟเวอร์ตอบกลับ Apollo จะแสดงข้อมูลคาดการณ์ล่วงหน้าทันที แล้วแทนที่ด้วยการตอบกลับจริงจากเซิร์ฟเวอร์เมื่อได้รับ

หากมิวเทชันล้มเหลว Apollo จะย้อนกลับไปยังสถานะแคชก่อนการคาดการณ์ล่วงหน้าโดยอัตโนมัติ ทำให้ส่วนติดต่อผู้ใช้ยังคงสอดคล้องกัน

จะเกิดอะไรขึ้นกับ useQuery เมื่อส่งผ่าน skip: true

กำหนดคิวรีด้วยแท็ก gql เรียก useQuery(QUERY, { variables, skip }) และจัดการสถานะ loading/error/data useMutation จะส่งกลับฟังก์ชันทริกเกอร์และออบเจ็กต์สถานะ ให้เรียกใช้พร้อมตัวแปรและจัดการผลลัพธ์ผ่าน onCompleted และ onError การตอบกลับแบบคาดการณ์ล่วงหน้าจะอัปเดตแคชทันที และย้อนกลับโดยอัตโนมัติเมื่อเกิดความล้มเหลว

ตัวเลือก skip และการดึงข้อมูลใหม่ตามตัวแปรช่วยจัดการการโหลดข้อมูลแบบมีเงื่อนไขและแบบกำหนดพารามิเตอร์