ทำความรู้จักกับ GraphQL กันหน่อย

วันนี้ได้พูดคุยเรื่อง GraphQL กันนิดหน่อย ซึ่งเป็นความรู้ใหม่ ๆ ที่ได้รับกลับมา จึงกลับมานั่งสรุปในเรื่องพื้นฐานที่สำคัญประกอบไปด้วย

• GraphQL คืออะไรกันแน่ ?
• ทำไมเราต้องให้ความสนใจด้วยล่ะ ?
• มันจะทำให้ชีวิตนักพัฒนาดีขึ้นอย่างไร ?

มาเริ่มกันเลย ปล. เริ่มด้วยการไปค้นหาข้อมูล จะเจอ link ที่ต้องอ่านคือ GraphQL Introduction

GraphQL คืออะไรกันแน่ ?

คือ query language หรือการเข้าถึงข้อมูลจาก API ของระบบ query ต่าง ๆ จะถูกประมวลผลที่ฝั่ง server และจะทำการตรวจสอบโครงสร้างของ query กับโครงสร้างข้อมูลที่ได้กำหนดไว้ นั่นหมายความว่า ผู้ให้บริการ API จะต้องทำการกำหนดโครงสร้างของข้อมูลไว้ก่อนเสมอ ซึ่งเป็นหนึ่งปัญหาหลักของ REST API ดังนั้น GraphQL จึงเป็นอีกหนึ่งทางเลือกในการสร้าง API ที่ดีกว่า REST อีกทั้งไม่ได้ผูกติดกับ database และ ที่จัดเก็บข้อมูลใด ๆ ทั้งนั้น ที่สำคัญมันไม่ใช่ query language สำหรับการดึงข้อมูลจาก database เหมือน SQL นะ แต่มันเป็นภาษาสำหรับการดึงข้อมูลในระดับ application ซึ่งสามารถทำงานร่วมกับระบบ backend ใด ๆ ก็ได้ เช่น

• SQL
• RDBMS
• NoSQL
• File system
• Existing system ใด ๆ ก็ได้

โดยรวมแล้ว มันคือ query language ที่มีโครงสร้างชัดเจน  (Schema) คุ้น ๆ กันไหมว่ามันคล้ายอะไร ?

เพื่อความเข้าใจมากยิ่งขึ้น มาสร้าง GraphQL server กันดีกว่า

ซึ่งใน community นั้นมีหลายภาษามาก ๆ ในบทความนี้จะลองสร้างภาษา JavaScript โดยตัวอย่าง source code อยู่ที่ Github::Hello GraphQL สิ่งที่ต้องการสร้างแบบง่าย คือ สร้าง API สำหรับดึงข้อมูลคะแนนสูงสุด ด้วย query ดังนี้ [code] query getHighestScore {score} [/code] ดังนั้นสิ่งที่เราต้องทำก่อนคือ กำหนด schema ของการ query กันก่อน ประกอบไปด้วย

• ชื่อของ query คือ getHighestScore
• โดย field ที่ต้องการคือ score

สามารถเขียน code ได้ดังนี้ [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="myschema.js"] จากนั้นทำการ start server และทดสอบ query ข้อมูลผ่าน curl ดังนี้ [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="query01.txt"] มีคำถามว่า ถ้าเราต้องการอยากรู้ว่า schema มีโครงสร้างอย่างไรบ้าง ? จะดูอย่างไร ? โดยที่ GraphQL มีคำตอบให้คือ Introspection ดังตัวอย่าง [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="query-schema01.txt"]

ตัวอย่างนี้มันดูง่ายไป ดังนั้น ลองมาดูตัวอย่างยาก ๆ ขึ้นมานิดหน่อย

เป็นการดึงข้อมูลผู้ใช้งานทั้งหมดในระบบออกมา โดยผู้ใช้งานแต่ละคนมีข้อมูลดังต่อไปนี้

• รหัส
• ชื่อ
• นามสกุล
• อายุ

[code] query allUser { id, firstname, lastname, age } [/code] ผลลัพธ์ที่ต้องการเป็นดังนี้ [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="result_alluser.json"]

ดังนั้นมาเริ่มสร้าง API กันดีกว่า

ขั้นตอนที่ 1 สร้าง UserType ขึ้นมาก่อน เพื่อกำหนดว่าผู้ใช้งานแต่ละคนมีโครงสร้างอย่างไร ดังนี้ [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="usertype.js"] ขั้นตอนที่ 2 สร้าง query ชื่อว่า allUser ขึ้นมาในส่วนของ query ดังนี้ [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="user_query.js"] ขั้นตอนที่ 3 ทำการ restart server และทดสอบผ่าน curl ได้ผลดังนี้ ตัวอย่างผู้ใช้งานสามารถเลือก field ที่ต้องการได้อีกด้วย โดยจะให้แสดงผลข้อมูลเฉพาะ id และ firstname เท่านั้น [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="query_alluser.txt"]

ตัวอย่างที่ผ่านมาคือ API ที่อ่านข้อมูลเพียงอย่างเดียวเท่านั้น

แต่ถ้าเราต้องการแก้ไข เพิ่มเติม และ ลบข้อมูลล่ะ จะทำอย่างไร ? ซึ่งทาง GraphQL จะเรียกการทำงานเหล่านี้ว่า Mutations เช่นต้องการทำ API สำหรับเพิ่มข้อมูลผู้ใช้งานขึ้นมา จะต้องทำอย่างไร มาดูกัน [code] mutation addUser { id: 4, first name: “first name 04”, last name: “last name 04”, age: 40 } [/code] สังเกตุว่าในการสร้าง addUser นั้น จะต้องทำการกำหนด argument ด้วย เหมือนกับการประกาศ function/method นั่นเอง โดยหลังจากที่เพิ่มผู้ใช้งานใหม่ไปแล้ว จะส่งข้อมูลผู้ใช้งานทั้งหมดกลับมาก สามารถเขียน code ได้ดังนี้ [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="mutation_adduser.js"] จากนั้นทำการ run ผ่าน curl ได้ผลลัพธ์ดังนี้ [gist id="b1178a1f94974d3ce6d89e5e251a994d" file="mutation_adduser.txt"]

เพียงเท่านี้ก็สามารถสร้าง GraphQL APIs แบบง่าย ๆ ได้แล้ว และน่าจะพอทำให้เห็นภาพของ GraphQL มากขึ้นนะครับ

และยังมีรายละเอียดอีกมากมายให้ศึกษายกตัวอย่างเช่น

• Learn GraphQL
• From REST to GraphQL
• Introduction to GraphQL
• VDO :: Exploring GraphQL
• 4 Reasons you should try out GraphQL today