Use React-Apollo with our redux store!

จากเนื้อหาตอนที่แล้ว หยุดความวุ่นวายของ Redux Store มาใช้ GraphQL ด้วย Apollo React! ที่เคยพูดถึงเรื่องของการ query GraphQL Server ด้วย lib ที่ชื่อว่า Apollo React ซึ่งมันช่วยให้เราสามารถเล่นกับ GraphQL ได้ง่ายมากๆ เพราะมัน wrap containers ของเราไว้หมดเลย….

ทีนี้ ถ้าใครเคยลองทำตามหรือลองเล่นดูจะรู้ว่า Apollo นี่มันสามารถทำงานได้บนเกือบทุก platform (ไม่เหมือน relay ใช้ได้เฉพาะบน React!) ซึ่งแต่นอน ตัว apollo มันสามารถใช้บน Vanilla JS ได้ด้วย หรือเรียกบ้านๆว่า js เพียวๆ ไม่โซดา ไม่น้ำนั่นเอง

ที่จะสื่อจากที่พล่ามไปข้างบนก็คือ หากเราไม่ต้องการใช้ Apollo Store ล่ะ ? หรือหากว่าเราต้องการใช้แค่ Apollo ในการ query GraphQL อย่างเดียวล่ะ โดยไม่ต้องมา wrap container ของเรา (คืออยากท่ายาก) เช่น อยากจะปล่อยให้ Apollo network layer ทำงานบน Action ของ Redux เรา ซึ่งมีหน้าที่ fetch ของบน GraphQL Server เท่านั้น และปล่อยให้ data flow เราไหลไปตาม Reducer เอง จะทำยังไง

คำตอบคงอยู่ที่ lib ของ apollo เองว่าทำได้หรือไม่ ซึ่งแน่นอน มัน support pure js อยู่แล้วครับ เราสามารถยัด query เข้าไปตรงๆ โดยหลักๆ function query จะ return Promise มาให้เราใช้ได้แบบง่ายๆเลย

มาดูตัวอย่างการนำ Apollo Client มาใช้ใน Action ของ Redux แบบเดิมๆของเรากัน ก่อนอื่นต้องสร้าง instance ของ apolloClient ขึ้นมาก่อน

ตัวอย่างการ query ตรงนี่เราทำใน action ของ redux เวลาใช้ก็ dispatch มันได้เลย:

จาก code ตัวอย่างด้านบนจะเห็นว่า เราสามารถ query graphQL ตรงๆได้เหมือน HTTP request เลย (ใช้แทน Fetch ใน js)

จาก experimental ในครั้งนี้ จะเห็นว่า apollo client นั้นมีความยืดหยุ่นในการใช้งานอย่างมาก แต่ยังไงก็ตามหากต้องการ dev React, ReactNative app นั้นก็แนะนำให้ใช้ Apollo React มากกว่านะ เพราะยังไงมันก็ถูกออกแบบมาให้ใช้งานร่วมกับ React โดยตรงอยู่แล้ว