hand tlhand crfog b
02Oct, 2020
Language blog :
Thai
Share blog : 
02 October, 2020
Thai

เทคนิคการทำ data fetching ด้วย SWR

By

5 mins read
เทคนิคการทำ data fetching ด้วย SWR

สวัสดีครับ วันนี้เราจะมาลองใช้งานเครื่องมือในการทำ data fetching ที่มีชื่อว่า SWR กัน ก่อนอื่นมาดูกันว่า SWR คืออะไรและเราได้ประโยชน์อะไรจากการใช้งาน

ปัญหา

ปัจจุบันการ fetch ข้อมูลจาก backend ส่วนใหญ่เราจะคุ้นเคยกับการใช้งาน Axios ซึ่งมีข้อเสีย คือเวลาที่เราทำการ fetch ข้อมูลมาแสดงจะมีจังหวะที่ฝั่ง frontend จะต้องรอ response กลับมาจาก backend ระหว่างนี้ผู้ใช้งานก็จะเห็น loading อนิเมชัน และหากผู้ใช้งานมีการเปลี่ยนหน้าไปมาก็จะต้องรอโหลดข้อมูลทุกครั้ง ซึ่ง SWR จะมาช่วยแก้ปัญหานี้

SWR คืออะไร?

SWR ย่อมาจาก Stale While Revalidate ซึ่งเป็นกระบวนการทำ caching ให้กับข้อมูลที่เราทำการ fetch มาจาก server โดยหลักการ คือเมื่อมีการยิง request เพื่อจะไป fetch ข้อมูล SWR จะทำการคืนค่าจาก caching มาให้ (stale) และทำการยิง request ไป fetch ข้อมูล (revalidate) และสุดท้ายเมื่อได้ข้อมูลกลับมาก็จะนำมา update ให้อีกที ข้อดีก็คือจะทำให้ UX (user experiences) ดีขึ้นเพราะผู้ใช้งานสามารถเห็นข้อมูลได้ทันทีไม่ต้องรอ response กลับมาจาก server

วิธีการใช้งาน

ติดตั้งด้วย yarn หรือ npm

SWR

ตัวอย่างการใช้งาน

useSWR

จาก code ทำการ import useSWR ซึ่งเป็น React hooks เข้ามาจาก SWR และนำมาใช้งานโดยทำการส่ง parameter ให้ 2 ตัว ตัวแรกคือค่าของ key ซึ่งจะเป็นค่า unique ของข้อมูลแต่ละตัวที่เราจะทำการ caching ในตัวอย่างค่าของ key คือ [‘/api/user/’, userId] ซึ่งเป็น array ของ ‘/api/user/’ และ userId โดย React component ทำการรับ props ชื่อ userId เข้ามาเพื่อจะนำไปใช้ในการ fetch profile ของ userId นี้เราจึงทำการส่งค่า key ที่เป็นของ userId นี้ให้กับ useSWR เพื่อทำการ caching ข้อมูล

แล้ว fetcher คืออะไร fetcher คือ wrapper function ของการ fetch ข้อมูลตามตัวอย่างในรูปเราใช้ fetch ที่เป็น native fetch ของ browser หรือใครคุ้นเคยกับการใช้ axios ก็สามารถใช้ได้เช่นกัน

ค่าที่ return กลับมาจาก useSWR คือ data และ error และนอกจากนี้เรายังสามารถกำหนด option เพิ่มเติมในการใช้งานได้

SWR Options

เราสามารถกำหนดค่า options เพิ่มเติมในการใช้งานได้ ในตัวอย่างมีการกำหนดค่า refreshInterval ซึ่งจะทำการ fetch ข้อมูลให้ทุก ๆ 3 วินาที หรือ options อื่น ๆ เช่น revalidateOnFocus ซึ่งค่า default เป็น true การทำงานคือ หากเรามีการสลับ tab ของ browser ไปที่ tab อื่นและสลับกลับมาจะทำการ fetch ข้อมูลให้อัตโนมัติ

SWR Options

Mutate

หากเราต้องการให้ผู้ใช้งานสามารถเห็นการเปลี่ยนแปลงข้อมูลได้ทันที เราสามารถใช้ความสามารถของ mutate ได้ ตามตัวอย่างจะเป็นการยิง request เพื่อไป update ข้อมูล name ของผู้ใช้งานเราสามารถใช้ mutate ในการ update ข้อมูล local ที่อยู่ใน cache เพื่อนำข้อมูลมาแสดงให้ผู้ใช้งานเห็นได้ทันที และทำการยิง request ไป update ข้อมูลจริงบน server และเมื่อได้ response จาก server ก็นำข้อมูลมา update ข้อมูลใน cache อีกที

Mutate

Infinite Loading

Infinite Loading

กรณีที่เราต้องการทำ infinite loading เช่น fetch ข้อมูล notification มาแสดงก็สามารถใช้งาน feature useSWRInfinite ได้ โดยหลักการทำงานคือ useSWRInfinite จะทำการ cache ค่าตาม url ที่เปลี่ยนไปโดยจะ return ค่า index กลับมาให้ใช้ในการกำหนด pagination ของการ fetch ข้อมูลซึ่งการเปลี่ยนค่า index นี้สามารถทำได้ด้วยการใช้ function setSize ที่ return มาให้ส่วนเบื้องหลังการเก็บค่า cache ของ useSWRInfinite เป็นอย่างไร ลองดูตัวอย่าง log ด้านล่างได้เลยครับ

จากภาพเราลอง log ค่า keys ของ cache ที่ useSWRInfinite ทำการเก็บไว้จะพบว่ามีการเก็บค่าของข้อมูลที่ fetch มาแต่ละชุดตามค่าของ size ที่เปลี่ยนไป และมีการเก็บค่า arg, err, size ของค่าปัจจุบันไว้เพื่อที่หากมีการ revalidate ข้อมูลก็จะสามารถนำค่าใน cache มาแสดงได้ถูกต้อง

จบไปแล้วนะครับสำหรับการใช้งาน SWR เบื้องต้นในการทำ data fetching เพื่อช่วยเพิ่ม UX (user experiences) ให้ผู้ใช้งานมีความรู้สึกว่าได้ใช้งานแบบ real-time โดยหลักการนี้เรียกว่า Optimistic UI หากเพื่อน ๆ คนไหนสนใจก็ลองหาข้อมูลเพิ่มเติมได้ครับ แล้วไว้พบกันใหม่ใน blog หน้าครับ

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

09
October, 2024
JS class syntax
9 October, 2024
JS class syntax
เชื่อว่าหลายๆคนที่เขียน javascript กันมา คงต้องเคยสงสัยกันบ้าง ว่า class ที่อยู่ใน js เนี่ย มันคืออะไร แล้วมันมีหน้าที่ต่างกับการประกาศ function อย่างไร? เรามารู้จักกับ class ให้มากขึ้นกันดีกว่า class เปรียบเสมือนกับ blueprint หรือแบบพิมพ์เขียว ที่สามารถนำไปสร้างเป็นสิ่งของ( object ) ตาม blueprint หรือแบบพิมพ์เขียว( class ) นั้นๆได้ โดยภายใน class

By

4 mins read
Thai
09
October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
9 October, 2024
15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G
ผู้ให้บริการเครือข่ายในสหรัฐฯ ได้เปิดตัว 5G ในหลายรูปแบบ และเช่นเดียวกับผู้ให้บริการเครือข่ายในยุโรปหลายราย แต่… 5G มันคืออะไร และทำไมเราต้องให้ความสนใจ บทความนี้ได้รวบรวม 15 สิ่งที่ทุกธุรกิจต้องรู้เกี่ยวกับ 5G เพราะเราปฏิเสธไม่ได้เลยว่ามันกำลังจะถูกใช้งานอย่างกว้างขวางขึ้น 1. 5G หรือ Fifth-Generation คือยุคใหม่ของเทคโนโลยีเครือข่ายไร้สายที่จะมาแทนที่ระบบ 4G ที่เราใช้อยู่ในปัจจุบัน ซึ่งมันไม่ได้ถูกจำกัดแค่มือถือเท่านั้น แต่รวมถึงอุปกรณ์ทุกชนิดที่เชื่อมต่ออินเตอร์เน็ตได้ 2. 5G คือการพัฒนา 3 ส่วนที่สำคัญที่จะนำมาสู่การเชื่อมต่ออุปกรณ์ไร้สายต่างๆ ขยายช่องสัญญาณขนาดใหญ่ขึ้นเพื่อเพิ่มความเร็วในการเชื่อมต่อ การตอบสนองที่รวดเร็วขึ้นในระยะเวลาที่น้อยลง ความสามารถในการเชื่อมต่ออุปกรณ์มากกว่า 1 ในเวลาเดียวกัน 3. สัญญาณ 5G นั้นแตกต่างจากระบบ

By

4 mins read
Thai
09
October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
9 October, 2024
จัดการ Array ด้วย Javascript (Clone Deep)
ในปัจจุบันนี้ ปฏิเสธไม่ได้เลยว่าภาษาที่ถูกใช้ในการเขียนเว็บต่าง ๆ นั้น คงหนีไม่พ้นภาษา Javascript ซึ่งเป็นภาษาที่ถูกนำไปพัฒนาเป็น framework หรือ library ต่าง ๆ มากมาย ผู้พัฒนาหลายคนก็มีรูปแบบการเขียนภาษา Javascript ที่แตกต่างกัน เราเลยมีแนวทางการเขียนที่หลากหลาย มาแบ่งปันเพื่อน ๆ เกี่ยวกับการจัดการ Array ด้วยภาษา Javascript กัน เรามาดูตัวอย่างกันเลยดีกว่า โดยปกติแล้วการ copy ค่าจาก value type ธรรมดา สามารถเขียนได้ดังนี้

By

4 mins read
Thai

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.