ของโคตรดี! เมื่อแทนที่ GraphQL Backend ด้วย Graphcool!

สำหรับท่านที่ไม่เคยใช้ GraphQL มาก่อน น่าจะเคยใช้ชีวิตร่วมกับ REST มาก่อน ซึ่งตัว REST จะมีความต่างที่ชัดเจนจาก GraphQL คือ REST เราต้องกำหนด endpoint เต็มไปหมด ถ้า model เปลี่ยนไปเรื่อยๆต้องมาแก้ทีละ endpoint ขึ้นมาทีละ layer แต่ GraphQL นั้นจะรวบ endpoint ทั้งหมดเหลือแค่ 1 endpoint แล้วให้ developer สร้าง query ที่แตกต่างกันเพื่อให้ได้ผลลัพธ์ที่แตกต่างกันแทน

ความแตกต่างระหว่าง REST และ GraphQL — https://dev-blog.apollodata.com/graphql-vs-rest-5d425123e34b

อ่านเพิ่มเติมเกี่ยวกับ GraphQL แบบลึกๆ ขอแนะนำ — www.howtographql.com

…ซึ่งในการสร้าง GraphQL Backend สักครั้ง ตั้งแต่เริ่มพัฒนาไปจน deploy ขึ้น production มีขั้นตอนเยอะแยะให้ต้องทำ เช่น

• Set up backend — อาจจะเขียน GraphQL Backend ด้วย Express.js ซึ่งเชื่อมต่อเข้ากับ Database ดีๆสักตัว
• Define Schema — สร้าง model กำหนด type ต่างๆที่จะใช้ รวมไปถึงออกแบบ Database
• สร้าง CRUD(Create, Read, Update, Delete) Operation ซ้ำไปซ้ำมา — บางโปรเจคที่มีขนาดใหญ่มากๆ เราก็ต้องเขียน operation พื้นฐานพวกนี้ให้ครอบคลุมทุก model เพื่อให้สามารถจัดการได้ทุก model ใน database
• จัดเรื่อง Security ทั้งหมดเอง — เช่น ใครมีสิทธิ์ในการ Read บ้าง ใครสามารถ Delete ข้อมูลส่วนนี้ได้บ้าง ต่างๆมากมาย
• Deploy service ทั้งหมดขึ้น production — deploy แล้วยังไม่จบนะ ต้องมาจัดการ, ดูแลเซิฟเวอร์ และ ฐานข้อมูลด้วยตัวเองอีก

และอีกมากมาย … จะเห็นว่ากว่าจะได้ GraphQL Backend สักครั้ง อาจจะใช้เวลา 2–3 วันจึงจะทำงานได้สมบูรณ์บน production รวมไปถึงต้องใช้ความรู้ในหลายๆด้านเพื่อให้ทำทั้งหมดนี้ได้ ซึ่งในปัจจุบันปัญหา developer ระดับที่พอทำงานได้ทั้งหมดนี้ หายากยิ่งกว่างมเข็มในกระบะทรายเสียอีก

ดีกว่าไหม? ถ้าเราสามารถลดงานของ devloper ในการจัดการ GraphQL Backend ลง 80–90% ด้วย Graphcool

…ในการสร้าง GraphQL Backend ด้วย Graphcool มีขั้นตอนสั้นๆไม่กี่ขั้นตอนดังนี้ครับ

• สร้างโปรเจค Graphcool บนเครื่องของเรา (~5 sec)
• เขียน model และ constant ต่างๆในงานของเรา (~2min ขึ้นอยู่กับความใหญ่ของงานด้วยนะ)
• Bundle file และ deploy ขึ้น Graphcool server (~40sec)

แค่ 3 ขั้นตอนเท่านั้น เราก็จะได้ Graphcool Backend มาใช้งาน และยังสามารถ scale ได้อย่างเต็มที่ รองรับการใช้งานได้จำนวนมาก ชนิดที่ว่าไม่เปลืองเวลา และ ทรัพยากรบุคคลเลย…

รู้จักกับ Graphcool สักนิด(เถอะนะ)

Graphcool ทำตัวเป็น BaaS(Backend as a service) สำหรับสร้าง, พัฒนา และ deploy GraphQL Backend แบบที่เราไม่ต้องจัดการฝั่งเซิฟเวอร์เลย

จะเห็นว่า Architecture ของ Graphcool ครอบคลุมฝั่ง GraphQL Backend ให้เราทั้งหมด — https://github.com/graphcool/framework

ซึ่งหัวข้อที่น่าสนใจมีมากมาย แต่บทนี้ขอเล่าแค่ 2 เรื่องละกัน

• Graphcool CLI — Graphcool CLI (Graphcool Command-line Interface) คือ ชุดคำสั่งสำหรับใช้สร้างและจัดการ Graphcool Project
• Data-mapping —Data model ใน Graphcool จะถูกเขียนด้วย GraphQL SDL syntax ซึ่งแต่ละ Node ที่เรากำหนดขึ้นมาจะถูกสร้างลงใน Database พร้อมทั้งสร้าง CRUD Operation ให้เราอัตโนมัติ (Graphcool ใช้ SQL database เป็น Database หลัก)

นอกจากนี้ ขึ้นชื่อว่า Server-less แล้ว Graphcool ยังมีสิ่งที่เรียกว่า “Cloud Function” ให้ใช้ฟรีอีกด้วย

เจ้า Cloud Function เนี่ยคือ มันคือ FaaS (Function as a service) ที่เราฝาก function ของเราไว้บน cloud ของ Graphcool และจะทำงานตามเงื่อนไขบางอย่างที่เรากำหนดไว้ หรือ มองง่ายๆจะคล้ายๆ Cloud Function ของ Firebase เลยครับ เล่าเปิดซะยาว ไปลองใช้ Graphcool กันเลยดีกว่า

เริ่มต้นใช้ Graphcool กันเต๊อะ

ก่อนหน้านี้สำหรับเวอร์ชั่นแรกๆของ Graphcool การที่จะใช้งานยังมีแค่วิธีเดียวคือ

1. สมัครสมาชิกและสร้างโปรเจคที่ www.graph.cool
2. หลังจากนั้นก็ต้องพัฒนา service ของเรา(แก้ schema, เขียน cloud function), maintenance, debug ผ่านหน้าเว็บของ Graphcool ทั้งหมด

สร้างโปรเจค และ ทำงานผ่านหน้าเว็บของ graphcool ทั้งหมด

หลังจากนำไปใช้งานจริงๆพบว่า

ข้อเสีย — ทำ Automate CI ไม่ได้, แยก Environment ไม่ได้, หน้าเว็บบัคสุดๆ, จะต่อเข้ากับ 3rd party ก็ลำบากเหลือเกิน, ข้อจำกัดสูงมาก ขาดความ flexible ถ้า Graphcool ไม่ทำมา support ก็ทำอะไรไม่ได้เลย, และอื่นๆอีกมากมาย!

ข้อดี — เนื่องจากความง่ายของ console ทำให้สะดวกสำหรับโปรเจคที่ต้องใช้ทั้งทรัพยากรคน, เงิน และ เวลาน้อยที่สุด (ชนิดที่ว่างานเผาต้องส่งใน 1–2 วัน)

ใช้งาน Graphcool ด้วย Graphcool CLI(Command Line Interface)

ไม่นานมานี้ Graphcool ได้ release Graphcool CLI มาช่วยในการแก้ข้อเสียที่กล่าวมาข้างต้นของเวอร์ชั่นเว็บ โดยมีฟีเจอร์หลักๆ ประมาณนี้

• Build + Deploy to Graphcool — เป็นชุดคำสั่งที่จะ bundle ไฟล์ทั้งหมด และ deploy ขึ้น server เพื่อนำไปใช้งานต่อไป ซึ่งสามารถแยก Environment ได้ด้วย (ไว้จะกล่าวในบทต่อๆไป)
• Invoke Cloud Function on local — บางครั้งเราต้องการจะทดสอบ Cloud Function ซึ่งถ้าต้อง deploy ขึ้นไปทุกครั้งที่จะทดสอบคงไม่ถูกต้อง ฟีเจอร์นี้จึงช่วยในการทดสอบ function ที่เราเขียนบนเครื่องของเราได้ทันที
• Run Graphcool Framework by using Docker — ฟีเจอร์นี้ทำให้สามารถ build docker image และ run Graphcool Framework บน local หรือ จะนำ docker image ที่เรา build แล้วไป deploy ตั้งบนเซิฟเวอร์ของเราเองก็ได้!
• etc. (ฯลฯ)

ฟีเจอร์ต่างๆที่สร้างขึ้นมา เรียกได้ว่าครบเครื่องและตอบโจทย์มาก มาลองใช้ Grapcool CLI เลยดีกว่าครับ

1. ติดตั้ง Graphcool CLI

npm i -g graphcool

เวอร์ชั่นที่ใช้ตอนเขียนบทความคือ 0.9.2

2. สร้างโปรเจคแบบ simple สุดๆ

หลังจากติดตั้งแล้วเราสามารถใช้คำสั่งด้านล่างนี้เพื่อสร้างโปรเจคแบบ simple ได้ทันที

graphcool init

รอสักครู่ โปรเจค Graphcool จะปรากฏขึ้นมาใช้งานตามภาพด้านล่าง

หลังจากสร้างไฟล์ด้วยคำสั่ง init เรียบร้อย

ไฟล์หลักๆของ Graphcool Project ที่ CLI สร้างมาให้มีอยู่ 2 ไฟล์ได้แก่

1. graphcool.yml — ไฟล์นี้เปรียบเสมือน config หลักของโปรเจค โดยสิ่งที่อยู่ข้างในเอาไว้กำหนดรูปแบบ service ของ backend เราทั้งหมด

ตัวอย่างไฟล์ graphcool.yml

อ่านรายละเอียดเกี่ยวกับไฟล์ graphcool.yml ได้ที่ — https://www.graph.cool/docs/reference/service-definition/graphcool.yml-foatho8aip

2. Type Definition File — หรือในที่นี้คือ type.graphql เจ้าไฟล์นี้เป็นไฟล์สำหรับบันทึก type ทั้งหมดใน service ซึ่งจะใช้ในการสร้าง model ใน database, กำหนด schema ของ model, รวมไปถึงค่าคงที่จำพวก enum ต่างๆ

ตัวอย่าง type ต่างๆที่เราต้องการ ในทีนี้มีทั้ง Model types และ Transient types

อ่านรายละเอียดเพิ่มเติมเกี่ยวกับ type definition ได้ที่ — https://www.graph.cool/docs/reference/service-definition/graphcool.yml-foatho8aip#types

3. Deploy ขึ้น server ของ Graphcool

หลังจากกำหนด type และ schema ต่างๆเสร็จแล้ว สามารถ deploy ขึ้น cloud ของ Graphcool ได้ทันทีด้วยคำสั่ง

graphcool deploy

หลังจากนั้นก็จะขึ้นคำถามมา 2 ข้อคือ

1. region ที่ต้องการ deploy
2. ชื่อของ service

เมื่อ deploy สำเร็จ จะมีรายละเอียดของ service ที่เปลี่ยนไปและ endpoint 3 ชนิด Simple API, Relay API รวมไปถึง Subscription API ที่เราสามารถนำไปต่อกับฝั่ง client ได้ทันที โดยที่เราไม่จำเป็นต้องสร้าง server เองเลย

ขั้นตอนการ deploy สามารถทำได้ง่ายไม่ต้อง config มากมาย ภายใน 3 นาที

เนื่องจากความสามารถในการทำ Data-mapping ของ Graphcool
จึงทำให้ระบบสร้าง CRUD Operation ของ model ที่เราเขียนไว้ ให้ทันทีหลังจากที่ deploy เรียบร้อยแล้วโดยไม่ต้องเขียน resolver เองเลยแม้แต่ตัวเดียว

ตัวอย่าง CRUD Operation ที่ Graphcool สร้างให้จาก type ที่กำหนดไว้ในไฟล์ type.graphql

นอกจากนั้น หากเราต้องการจะใช้งาน GraphQL playground เพียงพิมพ์คำสั่ง

graphcool playground

หน้า playground จะเปิดขึ้นมาให้เราใช้งานได้ทันที

4. ใช้งานได้จริงป่าว? ลองเล่นหน่อย

เมื่อเราเปิดหน้า playground ขึ้นมาแล้ว สามารถสร้าง อ่าน แก้ไข หรือ ลบ model ต่างๆที่เรากำหนดไว้ได้ทันที

เช่น เราสามารถสร้าง User model ได้ทันทีด้วยคำสั่ง

Mutation ในการสร้าง User

เมื่อลองรันคำสั่งด้านบนด้วย playground จะได้ผลลัพธ์ดังนี้

ใช้งาน GraphQL ได้แล้ว เย่!!!

ได้ผลลัพธ์การสร้าง user แล้ว ไร้ซึ่ง error ใดๆ จะเห็นว่าเราสามารถใช้งาน GraphQL Backend ได้แล้วโดยสมบูรณ์ ใช้เวลาไม่ถึง 3 นาที! แทบจะไม่ต้องทำอะไรยุ่งยากเลยแม้แต่นิดเดียว ง่ายมากกกกก

ของแถม

Graphcool ยังมี API สำหรับ manage file ให้เราอีกด้วย โดยที่เราไม่ต้อง setup อะไรเพิ่มเติมเลย ทำได้ง่ายๆแค่ upload ไปที่

https://api.graph.cool/file/v1/__PROJECT_ID__

เมื่อ upload ไฟล์เสร็จสิ้นเราจะได้ url ที่มาสามารถนำไปใช้งานได้ทันทีเลย

อ่านเรื่องไฟล์เพิ่มเติม — https://www.graph.cool/docs/reference/graphql-api/file-management-eer4wiang0

สรุปข้อดี

• ประหยัดเวลา — Graphcool มีทั้งความสามารถในการทำ Data-mapping ซึ่งจะคอยสร้าง CRUD Operation ให้เรา เมื่อเราต้องการแก้ model ก็ทำได้ และใช้งานได้ทันทีไม่ต้องเสียเวลาในการเขียน resolver เพิ่มเติม นอกจากนั้น Graphcool ยังจัดการ backend, sacle และ database ให้ทั้งหมด
• learning curve ต่ำ — Graphcool วางตัวเป็น BaaS(Backend as a service) จึงส่งผลให้พัฒนาได้ง่าย ใช้เวลาในการเรียนรู้ต่ำ Frontend developer ก็สามารถใช้งานได้โดยไม่จำเป็นต้องมีความรู้ลึกๆเกี่ยวกับฝั่ง Backend เลย
• Focus on your goals — เนื่องจากเราไม่ต้องดูแลฝั่ง Backend เองเลย จึงสามารถทุ่มเวลาให้กับฝั่ง client ได้เต็มที่
• ความสามารถเพียบพร้อม —ฟีเจอร์ของ Graphcool ที่มีในขณะทั้ง Cloud Function ที่เป็นทั้ง custom resolver, subscription, หรือ function request pipeline ได้, กำหนด permission ให้แต่ละ model ได้อย่างละเอียด, Data-mapping ที่คอยจัดการ model ใน database และสร้าง CRUD operation ให้เราอัตโนมัติ
• Flexible — Graphcool สามารถประยุกต์ใช้งานได้หลากหลายมาก และยังสามารถ integrate เข้ากับ 3rd-party ต่างๆได้ง่าย ซึ่งจะเล่าให้ฟังในบทต่อๆไป

ข้อมีอยู่มากก็จริง แต่ก็ไม่มีอะไรในโลกนี้ที่จะ perfect 100%

อวยมาก แล้วข้อเสียล่ะ มีอะไรบ้าง?

• Availability — Graphcool framework ยังใหม่ ระหว่างเขียนบทความ “อวย” ครั้งนี้ CLI อยู่ในเวอร์ชั่น 0.9.5 จึงทำให้ spec ของตัว framework ไม่นิ่ง ส่งผลกระทบต่อ Developer ที่อาจจะต้องแก้งานบ่อยๆครับ
• Reliability — เนื่องจากอยู่ในช่วงที่มีการเปลี่ยนแปลงบ่อยทำให้ service ของ Graphcool จะติดๆดับๆบ้าง หรือ มักจะเจอบัคแปลกๆบ้างในการ deploy และใช้งาน (สามารถเข้าไปใน slack ของทีม Graphcool และแจ้งปัญหาได้ทันที เท่าที่ผ่านมาก็แก้ปัญหาได้อย่างรวดเร็วมากครับ)
• Limitation—ยังมีข้อจำกัดหลายๆอย่างอยู่ จึงทำให้ความสามารถด้อยกว่าการตั้ง GraphQL Backend เองนิดหน่อย เช่น
  https://www.graph.cool/docs/reference/functions/resolvers-su6wu3yoo2#current-limitations
• Document ยังเขียนได้ไม่ครอบคลุม — ตอนนี้เวลาเจอปัญหาแปลกๆ คือต้อง search หาใน issue ของ github ก่อนเลยครับ เพราะใน document คงไม่มีแน่ๆ ฮ่าๆๆๆ

สรุปจบบท

สำหรับผม ใช้งานมาประมาณ 3 เดือน Graphcool framework พัฒนาไวมากครับ อีกไม่นาน Graphcool framework จะเสถียรขึ้นอีกมาก ข้อเสียหลายๆอย่างก็จะหายไปครับ รวมไปถึงความสามารถพื้นฐานก็ทำได้ดีแล้ว สุดท้ายแล้วขอให้ Graphcool เป็น 1 ในทางเลือกที่ไม่เลวสำหรับ developer ที่ต้องการใช้งาน GraphQL ครับ

Graphcool สามารถช่วยลดระยะเวลา และ ขั้นตอนในการพัฒนาลงไปได้เยอะ รวมไปถึงยังช่วยประหยัดทรัพยากร developer ที่มีอยู่อย่างจำกัด ส่งผลให้สามารถทุ่มเวลาไปพัฒนาฝั่ง client ได้เต็มที่มากขึ้น จริงอยู่ที่ในเวอร์ชั่นปัจจุบันความเสถียรของ Graphcool ยังไม่สูงมากตามที่หลายๆท่านคาดหวัง แต่สำหรับงานที่ต้องทุ่มเทให้ฝั่ง client มากๆ Graphcool สามารถช่วยเรื่องนี้ได้ เพราะตอนนี้ฟีเจอร์พื้นฐานทั้งหมด Graphcool สามารถทำงานได้ตามต้องการแน่นอนครับ

วันนี้เปิดซีรีย์ “อวย Graphcool” ไว้เพียงเท่านี้ ตอนต่อไปจะมาเล่าเรื่องที่ Advanced มากกว่านี้ครับ อาทิเช่น

• Cloud Function, Custom Resolver, Authentication, Testing …
• How to Graphcool on Production? (Graphcool + Webpack + Automate CI)

ขอบคุณสำหรับการติดตาม ฝากคำถาม หรือ ข้อเสนอแนะไว้ด้านล่างได้เลยนะครับ แล้วพบกับบทที่สองเร็วๆนี้ครับ 😄

❤️ …. https://www.youtube.com/watch?v=4krfML6YHk0