ขอท้าวความซักนิดนึง

นี้เป็น blog แรกที่ผมเริ่มเขียนเพราะฉะนั้นอาจจะอธิบายดู งงๆ ไปบ้างขออภัยไว้ ณ. ที่นี้ด้วยนะครับ ส่วนเหตุผลที่เริ่มเขียนโดยเลือกเจ้า GraphQL เนี้ยเพราะว่าตัวผมเองพึ่งเริ่มใช้งานมันอย่างอย่างจริงจังเมื่อไม่กี่เดือนที่ผ่านมานี้เอง แต่กลับรู้สึกว่ามันเจ๋ง และ รู้สึกดีงามในการใช้งานมากกกกกก จนอยากระบายมันออกมา ( เผื่อจะมีคนอ่านละโดนป้ายยาบ้าง 555 ) เพราะฉะนั้นในบทความนี้จะ ไม่ใช่วิธีที่ถูกต้องครบถ้วน 100% แต่มันเป็นวิธีที่ผมเริ่มต้นกับมันนั้นเองครับ

เริ่มต้นยังไงดีล่ะทีนี้ ?

ก่อนที่เราจะมาเริ่มเขียน code กันอย่างจริงจัง ผมอยากให้ทุกคนเข้าใจการใช้งานเจ้า GraphQL นี้กันก่อนว่ามันแตกต่างจาก restful อย่างไรบ้าง โดยไอ้ GraphQL เนี้ยมันจะมีส่วนหลักๆ 3 ส่วนใหญ่ๆ ที่เรียกได้ว่าเป็นหัวใจหลักนั่นคือ query , mutation และ schema นั่นเองครับ

1.Query

ถ้าเปรียบเทียบมันก็เหมือน method get ของ restful นั้นแหละครับเพียงแต่เปลื่ยนจาก

GET http://myservice/something

เป็น

มาถึงตรงนี้อาจจะ งง ว่าอ้าวเห้ยแล้วมันส่งข้อมูลไปยังไง ? ไม่ใช่ http เหรอ ?

“เปล่าครับ มันก็ส่งผ่าน http นั้นแหละเพียงแต่มันจะส่งไปในรูปแบบนี้”

จากที่เห็นจะสังเกตุได้ว่ามันส่ง query language ไปเป็น string ผ่าน method post เพื่อเรียกข้อมูลออกมา

แต่ data จริงๆ มันซับซ้อนกว่านี้นี่ ??

ใช่ครับ เพราะฉะนั้นเรามาลองดู data ที่ใกล้เคียงของจริงมาอีกซักนิด

จะสังเกตุได้ว่า เราจำเป็นที่ต้องเขียน field ที่จะใช้ ลงใน Query ด้วย

เพราะว่าเนื่องจาก GraphQL เนี่ย มันหวงข้อมูลมากกก มันจะไม่ใจง่ายให้ข้อมูลเราทั้งหมดแบบ Restful แต่เราต้องบอกมันว่า เราต้องการข้อมูลอะไรบ้างที่จะใช้

แน่นอนข้อดีของมันคือเราสามารถควบคุม data ที่จะออกมาได้ ทำให้ไม่มีพวก data ที่ไม่จำเป็นเก็บไปก็เปลือง ram เปล่าๆ แต่ถ้าเรา field ที่เราต้องการใช้มันเยอะมากๆหล่ะ ? เราสามารถเขียนให้มันออกมาทุก field เลยได้มั้ย คำตอบคือ “ไม่ได้ครับ” ไม่ว่าเราจะใช้ field เยอะแค่ไหน เราก็ต้องเขียนมันลงไปใน GraphQL ทั้งหมดครับผม

แล้วถ้าเกิดเป็น Object ซ้อน Object ล่ะ ????????? จะเขียนยังไง

มันก็จะเป็นแบบนี้ครับ

นั่นก็คือไม่ว่าจะเป็น object เดี่ยวๆ หรือ object ซ้อน object เราก็จำเป็นที่ต้องกำหนด field ที่เราต้องการอยู่ดี ( เห็นมั้ยว่า ไอ้เจ้า GraphQL เนี้ยมันหวงข้อมูลขนาดไหน )

แล้วถ้าเราอยากใส่ parameter ไปกับ query ล่ะจะทำยังไง ???

มันก็จะไปท่านี้ครับ

ซึ่งเจ้า GraphQL มันก็มีช่องทางให้เรายัด parameter เผื่อไปประมวลผลดึง data มาเหมือนกันครับ โดยการใส่ไว้ในวงเล็บข้างๆ พร้อมบอกว่า parameter นั้นชื่ออะไรก็พอ

แต่ยังครับ GraphQL ยังมีทีเด็ดที่ผมชอบมากๆ อีกอย่างนึงคือ มันสามารถเรียก data หลายๆ ชุดพร้อมกันได้ด้วย !!!

ยกอย่างเช่น

จะเห็นได้ว่า นอกจากเราจะเรียก users มาแล้วเรายังสามารถเรียก companies มาโดยใช้เพียงแค่ 1 request เท่านั้น !!!!

โอ้ววววววว จ๊อดดด มันสุดยอดมาก

ลองนึกภาพตามนะครับ สมมุติว่าผมมี หน้า 1 หน้าที่จำเป็นต้องใช้ data ถึง 10 อย่าง เท่ากับว่าจากที่ผมเคยใช้ 10 request จะเหลือเพียงแค่ 1 เท่านั้น !! เรียกได้ว่าประหยัดจำนวน request ไปมากโขเลยทีเดียว

2.Mutation

ถ้าเปรียบเทียบกับ restful มันคือ method post,put,delete นั้นเอง เพียงแต่ GraphQL มันมัดรวมเจ้าพวกนี้ไว้ด้วยกันทั้งหมด เป็น mutation ( คือมันจะไม่สนเลยว่าเราจะ create update หรือ delete แต่มันสนแค่ว่า data จะถูก change แน่ๆ )

ตัวอย่าง

จะเห็นได้ว่าสิ่งที่เพิ่มเติมเข้ามาคือ createUser(firstName: “Jetsupa” , lastName: “krutang” , email: “jetsupa@jan.com”) ซึ่งในวงเล็บจะเป็น input เหมือนกับ Query ข้างบนเลยครับ แน่นอนว่าเราต้องเขียนบอกด้วยว่าจะเอา data output แบบไหน field อะไรบ้างเช่นเคย

แต่ในความเป็นจริงถ้าเรามี input เยอะๆ แบบนี้จะใช้งานยากมากเพราะ หน้าบ้านต้องคอย map data เข้าไปเป็น input อีกที เพราะฉะนั้นผมจึงแนะนำให้ใช้ท่านี้มากกว่า

ก็คือเราก็ทำให้ input ที่เข้ามาเป็น Object ไปซะ ทีนี้ field input เราก็เหลือแค่อันเดียวแล้ว ชื่อว่า createUserInput รับเป็น Object นั้นเอง ( แต่เป็นก้อนใหญ่ๆ แทน )

3.Schema

schema คือหัวใจของทั้งหมดใน GraphQL เลยครับ เพราะว่ามันจะเป็นตัวกำหนด data type ต่างๆที่จะใช้ใน GraphQL รวมถึงการใช้ Query , Mutation ต่างๆว่า GraphQL ของเราจะมี Query , Mutation และ Type อะไรบ้างยกตัวอย่างเช่น

ถึงตอนนี้ทุกคนคงอุทานว่า “นี้มัน %$@ อะไรกันวะะะะ” ใจเย็นๆครับ ขอให้กระผมได้อธิบายซักนิด

Type คืออะไร ????

อธิบายง่ายๆ type คือ data type นั้นแหละครับ ( พวก string , int ) และสิ่งสำคัญใน GraphQL คือ เราต้องกำหนด field ของ Type ให้กับ data ต่างๆ ที่เราจะใช้ด้วยเช่นจากตัวอย่าง

Type Company ต้องมี field id เป็น Int , name เป็น string และ users เป็น User

ตรงนี้แหละครับที่ผมชอบมาก คือเรานอกจากเราจะสามารถสร้าง data Type เองได้แล้ว เรายังสามารถบอกความสัมพันธ์ของ data ได้เช่นบอกว่า field users ของ Company จะต้องออกมาเป็น array ที่มี object หน้าตาเหมือน User เท่านั้น !! และเช่นเดียวกันกับ User ครับ field company ต้องออกมาหน้าตาเป็นแบบ Company เท่านั้น !!!!!

และนี้คือเหตุผลว่าทำไมตอน Query เราถึงสามารถกำหนด field ที่จะใช้ใน Object ซ้อน Object ได้ ก็เพราะว่า เราต้องกำหนดให้มัน นั่นเองครับผม !!!!

เดี๋ยวนะ แล้วถ้ามัน relation กันเองแบบนี้ถ้าเกิดอยากเรียก users ใน company ที่อยู่ใน users อีกทีนึงล่ะ เรียกมันซะ 3 ชั้นไปเลย แบบนี้ทำได้มั้ย ??????

คำตอบคือ “ได้ครับ” ผม มันก็จะออกมาหน้าตาเป็นแบบนี้

เพราะฉะนั้นเจ้า GraphQL นี้มันไม่มีปัญหาใดๆ กับการเรียก data หลายๆชั้นเพียงแต่ว่าเรา“ต้องเขียนบอกมัน”เท่านั้นเอง

แล้วไอ้ Input คืออะไรอ่ะ ??????

สำหรับ input นั้นเป็นการบอกว่า data type อันนี้จะมีไว้สำหรับเป็น input เท่านั้นนะจ๊ะเธอจะเป็นอย่างอื่นไม่ได้นะ !! ตัวอย่างเช่น

จากตัวอย่างนี้ มันแปลออกมาได้ว่า

“Mutation ที่ชื่อ createUser เจ้าจะต้องรับ input เป็น object ที่มี field firstName , lastName , email เท่านั้น !! ”

แล้วถ้าเกิดว่าเราทะลึ่งใส่ field ที่ไม่ได้กำหนดใน schema มาล่ะ ??????

มันก็จะ error มาด่าเราทันทีเลยครับว่าเราไม่ได้ defind phone ไว้นะเฮ้ย !!!

เห็นมั้ยครับ GraphQL นี่มันเข้มจริงๆ

สรุปกันดีกว่า

สำหรับผม ผมมองเจ้า GraphQL เป็นเหมือนกับ เจ้าหน้าที่ รปภ โหดๆ หน้าตาเข้มๆ ดุๆที่ตรวจคนเข้าออกอาคารตลอดเวลา และเราจะค้บพบว่าเขามีประโยชน์มาก ถ้าเรารู้จักใช้งานเขาอย่างถูกที่ถูกทาง

โดยสรุปแล้วในบทความนี้ผมจะให้ทุกท่านได้ทำความเข้าใจกับ GraphQL กันแบบคร่าวๆ ก่อนว่ามันใช้งานยังไง แตกต่างจาก restful แบบไหนแล้วบทความหน้าผมจะมาต่อในส่วนของ Coding ทั้งฝั่ง Server (Node.js Express )และ Client (React ) และอาจจะเพิ่มเติมในเรื่องของ Subscription เพื่อทำ realtime application ด้วย ( ถ้ายังมีไฟพอนะครับ 555 )

ก่อนจากกันขอทิ้งท้ายไว้ซักนิด

และถ้าบังเอิญมีใครหลงเข้ามาอ่าน กระผมก็ขอขอบพระคุณเป็นอย่างยิ่ง หวังว่าบทความนี้จะให้ความรู้ท่านไม่มากก็น้อย ถ้ากระผมเขียนอะไรผิดไปหรืออยากถกเถียงถึงเนื้อหาใน blog นี้ก็ comment เข้ามากันได้นะครับ (ผมจะดีใจมาก)

ยินดีรับฟังคำติชมทุกความเห็นนะครับ

นอกจากนี้ GraphQL ยังมีของเจ๋งๆ อีกมากมาย ไม่ว่าจะเป็น fragment , scalar หรือการ extend type สามารถไปตามอ่านกันได้ที่ document ของ graphql ได้เลยครับ