พา React-Native ขึ้นยานไปกันกับ Apollo มิติใหม่ของวงการ API Query
Apollo คือ Client Framework ที่ไว้ติดต่อกับ GraphQL (Server-side) ซึ่ง GraphQL เนี่ยก็ถูกพัฒนาโดย Facebook เหมือนกันกับ React-Native มันก็เป็นที่น่าสนใจว่าน่าจะเข้ากันได้ดีทีเดียว เข้าเรื่องกันดีกว่าว่าทำไมจะต้องมาใช้ Apollo มาเป็น Client Framework สำหรับ React-Native ปกติแล้วถ้าพูดถึง React-Native ทุกคนจะถึงนึก Component ซึ่ง Apollo ก็ทำมาเพื่อง่ายในการใช้งานเป็นแบบ Component
มาเริ่มกันเลยดีกว่า
ก่อนเริ่มสร้างโปรเจค React-Native สักตัวขึ้นมาก่อน
จากนั้น ติดตั้ง apollo ลงในโปรเจคของเราด้วยคำสั่ง มีด้วยกัน 3 ตัวด้วยกัน คือ apollo-boost, graphql และ react-apollo
npm install apollo-boost graphql react-apolloเปิดโปรเจคขึ้นมาแล้วสร้างไฟล์ใหม่ขึ้นมาชื่อว่า ApolloApp.js จากนั้นทำการครอบ <App /> ด้วยแท็ค ApolloProvider และสร้าง uri ไว้สำหรับ query ข้อมูล (uri คือลิงก์ของฝั่ง Server-side ที่เราจะดึงข้อมูลมา)
ต่อไปเปิดไฟล์ App.js เราจะลอง query ข้อมูลมาจาก uri จากด้านบน แล้วมาดูกันว่าเราจะได้อะไรมาบ้าง โดยข้อมูลที่เราต้องการนั้นสามารถกำหนดได้ใน tag query นะครับ
เราได้ข้อมูลมาเยอะแยะเลย หลัก ๆ แล้วสิ่งที่เราตั้งใจจะ query มา จะอยู่ใน data ส่วนที่เหลือจะเป็น function อื่น ๆ ที่ Apollo มีมาให้
ในที่นี้จะขอยกตัวอย่างการใช้งานของ loading กับ refetch นะครับที่ได้ใช้บ่อย ๆ แน่นอน
loading ไม่มีอะไรมากครับ loading จะมีค่าเป็น true จนกว่าข้อมูลจะถูก query จนเสร็จ
ผลที่ได้ก็จะเป็นตามภาพ เมื่อ Component นั้นทำการ query อยู่ก็จะแสดงหน้า loading อยู่จนกว่าจะ query เสร็จ
ส่วนของ refetch นั้นจะเป็นการ query ซ้ำอีกทีหนึ่ง ผมได้ทำการเพิ่มปุ่มแล้วใส่ฟังก์ชัน refetch เข้าไป แล้วทำการกดดูข้อมูลก็จะถูก query ใหม่อีกครั้ง จากภาพด้านล่างเราได้รูปภาพใหม่มาจากการ refetch
Apollo จะช่วยลดการใช้งานของ Redux Coding จากเดิมแล้วเวลาเรา fetch ข้อมูลมาเราก็จะทำใน Redux ซึ่งเราจะต้องทำการเขียน Redux ขึ้นมาเอง ซึ่งเป็นเรื่องที่น่าปวดหัวพอตัวเลย เพราะเราจะต้องเขียนให้มัน handle ตั้งแต่การ fetch, loading scene, และ error ไหนจะต้องอัพเดต component เมื่อ data มีการเปลี่ยนแปลง Apollo ก็จัดเตรียมมาให้อย่างดี ใครที่โค้ด Redux ไม่ถนัดหรือไม่เก่งอย่างผม แนะนำให้ใช้เลยครับ เพราะมันง่ายมาก ไม่ยุ่งยากอย่างที่คิด
เพื่อน ๆ สามารถไปเรียนรู้เพิ่มเติมได้ที่เว็บหลักของ Apollo ตามลิงก์ด้านล่างเลยครับผม
