"Master React Query with mystifying ease" Analysis

บท 1 Laying the Foundation

De-duplication: basic ของการ fetching ข้อมูลด้วย React query ช่วยลดการ fetch หลายๆ ครั้งของ React (Strict mode, State management) ค่อนข้างมีประโยชน์ทั้งฝั่ง user, และ developer (หากยังไม่เคยใช้มาก่อน)
Queries, Caching, and Observers: ประโยชน์เสริมต่างๆ ของการใช้ React query เช่น
- การ Caching: มีประโยชน์กับ DX เพราะไม่ต้องเขียนระบบ Caching ให้ยุ่งยาก แต่แค่ตั้ง Stale time ง่ายๆ ใน useQuery
- การ Observer (Subscribe ดูการเปลี่ยนแปลงของ state)

บท 2 Querying Data

Data Synchronization: เพิ่ม DX ให้กับทีม เนื่องจากข้อมูล update ui ง่ายมากขึ้น (แต่จริงๆ ถ้าเป็น state อยู่แล้วไม่ค่อยมีผล)
Fetching on Demand: เพิ่ม DX ให้กับทีม แต่ไม่มาก สามารถทำได้โดยไม่จำเป็นต้องใช้ React query (enabled: false)
Garbage Collection: ได้ผลพลอยมากจากการ Caching ไม่มีผลมาก

บท 3 Advanced Query Patterns

Polling: เพิ่ม DX ช่วยทำให้ทำหน้าเว็บแบบ Real-time ง่ายมากๆ (ค่อนข้างมีประโยชน์เลย)
Dependent Queries: เพิ่ม UX, DX ของ state management เว็บจะดู polishing ขึ้น แต่ค่อนข้างหา use-case ยาก
Parallel Queries (useQueries): เพิ่ม DX, กับความ clean โค้ด แต่อาจจะหา use-case ใช้ยาก
Avoiding Loading States (Prefetching): เพิ่ม UX ค่อนข้างมาก สำหรับ api ที่ช้าๆ ทำให้เว็บดูเร็วขึ้น (แต่อาจมีปัญหาได้ถ้า overuse, ใช้ Link prefetch อาจจะเมคเซ็นกว่า)
Pagination: เพิ่ม DX, แต่ไม่ค่อยมาก
Infinite Queries: เอามาใช้ทำ Infinite scroll แต่แนะนำไปใช้ Library อื่นที่สร้างมาตรวจ Intersect จะง่ายกว่า ตัวอย่าง. react-infinite-scroll-component

บท 4 Handling User Interactions

Performing Updates: เพิ่ม DX ช่วยจัดการ state กับ data fetching ค่อนข้างง่ายเลย
รวม Linking Mutations to Queries กับ Optimistic Updates: ช่วยเพิ่มทั้ง DX และ UX ทำให้ ui ดู publish ดู real-time ไม่ต้องจัดการ state ยุ่งยาก แค่เรียก hook ที่ทำ optimistic update ไว้

ตัวอย่างการทำ Optimistic Update บน LearnArai

บท 5 Scaling Your App

Customizing Query Defaults: อาจเพิ่ม DX แต่ use-case ค่อนข้างน้อย
Validating Query Data: (เข้าใจว่าคือการ validate ข้อมูลด้วย schema ปกติ) ค่อนข้างคิดว่าจะไม่มีประโยชน์ พวกนี้ควรอยู่กับ Form (ซึ่งของ Tanstack ก็มี form validation ลองใช้แล้วค่อนข้าง improve DX เลย) หรือ Server-side validation

บท 6 Plugins & Adapters

Offline Support: มีประโยชน์สำหรับ Web app ที่ต้องการทำเป็น PWA แต่ว่า มี Solution อื่นๆ ที่จะทำ Proxy บน Web worker ได้ (ยังนึกชื่อไม่ออก)
Persist Queries: เพิ่ม UX แต่หา use-case ค่อนข้างยาก
Persist Mutations: เพิ่ม UX แต่หา use-case ค่อนข้างยาก

บท 8 Bonus

Server Side Rendering: เพิ่ม UX นิดหน่อย ลองใช้แล้วค่อยของ bad on DX ไปใช้ prefetching จะง่ายกว่า
Suspense: ใช้ทดแทนกับ isLoading ไม่ค่อยมีประโยชน์ แต่อาจมี use-case แบบหน้าโหลด (ของทุกข้อมูล) ใน layout
WebSockets: ตาม blog ที่ official docs ให้มา, Using WebSockets with React Query ดูแล้วค่อนข้างยุ่งยากละลด DX ไปลองใช้ library อื่นๆ ดูจะง่ายกว่า ตัวอย่าง. react-use-websocket

My conclusion

โดยรวมแล้วทุกหัวข้อมี Official docs ให้อ่าน และตัวอย่างทั้งหมด บาง Features ที่สอน มักมี use-case ที่ใช้ไม่บ่อย หรือบาง Features จะดีกว่าถ้าไปใช้ Library แยกออกมา ถ้าเกิดทางทีมยังไม่เคยใช้งาน React query หรือยังไม่รู้จัก React query เริ่มต้นด้วย Course นี้อาจจะทำให้เห็นภาพรวม และ features ทั้งหมดมากขึ้น (แต่จริงๆ ที่จำเป็นต้องใช้จะมีไม่กี่อัน), ขอบคุณที่อ่านครับ 🥰