บทความ IT เจ๋งๆ

ถ้าคุณอยู่ในแวดวงของ Front-end Development คงพอจะได้เห็นแนวโน้มหรือมีการพูดถึงเรื่อง GraphQL มาบ้างแล้ว ซึ่งในบทความนี้จะกล่าวถึงว่า GraphQL คืออะไร มันสำคัญอย่างไร และช่วยให้การทำงานของ Front-end Developer ง่ายขึ้นได้อย่างไรบ้าง

GraphQL คืออะไร

GraphQL เป็น Query Language ที่สร้างขึ้นโดย Facebook ช่วยให้ Front-end Developer สามารถเขียน Query ข้อมูลในรูปแบบที่คุณต้องการ อันที่จริง GraphQL ไม่ใช่ Database Language แต่ GraphQL สามารถใช้งานร่วมกับหลายๆ Database เช่น SQL, MongoDB และแม้แต่ REST API ที่เชื่อมต่อกับ Database

GraphQL ที่ใช้บน Server ช่วยให้คุณสามารถกำหนดวิธีที่คุณต้องการจะ Fetch Data จากนั้นเมื่ออยู่บน Client คุณสามารถ Execute Query ที่มีรูปแบบข้อมูลตามที่คุณต้องการ และข้อมูลที่คุณจะได้รับกลับมา ก็จะมีรูปแบบตามที่คุณ Query

ลองดูตัวอย่างนี้:

และนี่คือข้อมูลที่คุณได้รับกลับมา:

เนื่องจากบทความนี้ มุ่งเน้นไปถึงประโยชน์ที่ Front-end Developers จะได้รับ จึงจะไม่ขอลงรายละเอียดไปที่การทำงานของ GraphQL กับ Server มากนัก อย่างไรก็ตามสิ่งที่ทำให้เกิด GraphQL มีความพิเศษขึ้นมา คือ GraphQL Schema ซึ่งช่วยให้คุณสามารถกำหนด Type ที่ใช้งานได้ทั้ง Server และ Client และนี่คือ ตัวอย่าง Schema สำหรับ App ที่สมมติขึ้นมา:

การดู schema ทำให้คุณในฐานะ front-end developer สามารถบอกถึงลักษณะสำคัญหลายอย่างของข้อมูลได้ เช่น ชนิดและจำนวนของ arguments ที่ใช้ในการ query, ชนิดของ data ที่ return กลับมา เป็นต้น ดังเช่นตัวอย่างด้านบน จะเห็นว่าการจะ query data ของ user นั้น คุณจะต้องส่ง argument ชื่อ username ที่มี ชนิดของ Data เป็น String เข้าไป และจะได้รับชนิดของข้อมูลที่ชื่อ User กลับออกมา ส่วนเครื่องหมาย ! แสดงถึงว่า ถ้าคุณไม่ส่งค่าของ Argument username เข้า Function ก็จะ Return Error กลับออกมา

ซึ่งเมื่อเปรียบเทียบตัวอย่างด้านบนกับ Standard ของ API อื่นๆ เช่น Swagger for REST API ที่คุณต้องคิดว่า document ของ Swagger ได้รับการเขียนมาอย่างดีโดยคนที่เขียน Document นั้นแล้ว อีกทั้ง Swagger นั้นไม่ได้มีการทำการตรวจสอบชนิดของข้อมูลอย่างจริงจังซึ่งทำให้ไฟล์ YAML ของ Swagger นั้นยากแก่การอ่านและเข้าใจ

แต่นี่ไม่ได้หมายความว่า Swagger มันแย่นะ (ถ้าคุณใช้งานมันได้อย่างถูกต้องและเหมาะสม มันก็มีประโยชน์มากเช่นกัน) แค่ คุณต้องใช้มันให้ถูกต้อง และเมื่อ Developers มีแนวโน้มที่จะ Develop งานอย่างรวดเร็ว ก็ดูเหมือนว่างานส่วนของ Documentation ก็จะถูกลดความสำคัญลงไปด้วย

วิธีใช้ GraphQL กับ Client

มีหลากหลายวิธีที่จะใช้งาน GraphQL บน Client ซึ่งหนึ่งในวิธีที่นิยมมากที่สุดในการใช้ GraphQL คือการใช้ Library ที่เรียกว่า Apollo-client ซึ่ง Apollo Client สามารถใช้งานได้กับทั้ง React, Vue, Angular และอื่นๆ อีกด้วย

ตอนนี้ Apollo Client เพิ่งปรับปรุงเป็น Version 2.0 แล้ว แต่ไม่สามารถนำไปใช้งานกับ Version 1.0 ได้แล้ว เพราะหลายๆ Packages อย่างถูกเปลี่ยนทั้ง ชื่อ และเปลี่ยน APIs ไปแล้ว แต่อย่างไรก็ตาม Concept โดยรวมยังคงเหมือนกัน คือ การนำเอา App ทั้งหมดใส่ลงไปใน Apollo Provider (เหมือนที่ทำกับ Redux) และ ซึ่งขณะนี้ Components ทั้งหมดของคุณ สามารถเข้าถึง Client และสามารถเขียน Query และ Mutation ไปยัง Server ได้

Apollo Client ดูเหมือนจะเป็นผู้ทำหน้าที่ "อยู่เบื้องหลัง" ที่ยอดเยี่ยมซึ่งคุณคาดว่ามันน่าจะมีมาตรฐาน แต่ดูเหมือนจะไม่ได้เป็นอย่างนั้นสักเท่าไร ตัวอย่างหนึ่งคือเรื่องการ Query แบบ "Batching" ถ้าเรา Load component ที่มี 2 queries ที่แตกต่างกัน ด้วยค่า Default มันจะส่ง 2 Request ที่แตกต่างกัน แต่อย่างไรก็ตาม Apollo Client มี Option ในการ Query แบบ "Batch" ซึ่งจะวาง Query ทั้ง 2 ลงไปใน Single Request และส่งไปยัง Server ซึ่งจะช่วย Save HTTP requests

Apollo Client มีประสิทธิภาพมากในเรื่อง Caching Feature ซึ่งทำให้ Components Fetch จาก Cache ก่อน อย่างนั้นถึงจะส่ง Request ถ้า Cache เกิดค้างขึ้นมา (โดยทั่วไปจะคิดที่ 100 มิลลิวินาที, แต่สามารถปรับแต่งได้)

นี่คือตัวอย่างของ Apollo Client และการใช้ Query:

ในที่นี้ไม่ได้กล่าวถึงการใช้ React แต่หากคุณต้องการใช้งาน React คุณสามารถใส่ Query ลงใน React Component

อีกวิธีหนึ่งในการใช้ GraphQL บน Client คือ ให้ใช้ Relay ซึ่งใช้ได้กับ React เท่านั้น (ใครใช้ Vue อยู่ ไม่สามารถใช้ Relay ได้) แต่ถ้าคุณใช้ Relay ดูเหมือนจะค่อนข้างใช้ยากกว่า Apollo สักหน่อยเพราะต้อง DIY เองหลายอย่าง เช่น Caching และ Schema Implementation  คุณสามารถดูตัวอย่างบางส่วนที่นี่ เพื่อจะได้ทราบภาพรวมของการทำงานของ Relay และดูว่ามันมีทั้งส่วนที่คล้ายคลึงหรือแตกต่างจาก Apollo อย่างไร และหากคุณสนใจศึกษา GraphQL สามารถศึกษาเพิ่มเติมได้จากที่นี่

ที่มา:  https://medium.freecodecamp.org/

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

บทความที่เกี่ยวข้อง

• แนะนำ 5 Function Decorators สำหรับมือใหม่
• 10 Frameworks และ Libraries ที่ดีที่สุด สำหรับ Java Web Developers
• วิธีมัดใจทีม Operations ของ Developers