ลองเล่นๆกับ graphQL

ตอนที่สอง มาแล้วนะครับ : >> ตอนที่ 2

Hello ช่วงนี้ว่างๆ ก็ศึกษาหาไรเข้าหัวไปเรื่อยๆ จนมาเจอกับ graphQL ซึ่งมันน่าสนใจเป็นอย่างมาก จึงได้เกิดบทความนี้ขึ้นมา

ผมเองก็ยังใหม่มามีอะไรผิดพลาดก็ช่วยบอกกันได้นะงับ

GraphQL คือ application layer query language ที่ถูกสร้างขึ้นโดยFacebook

GraphQL ไม่ใช่ภาษาโปรแกรมมิ่งใหม่, ไม่ใช่ framework

GraphQL คือตัวกลางในการตัดการข้อมูลระหว่าง server-client

ที่มาจาก : learngraphql.com

ตอนนี้อาจจะยังไม่เข้าใจ ผมจึงขอยกตัวอย่างสถานการณ์ที่ผมเคยเจอมาละกันนะครับ

แผนกที่ผมทำเคยต้องทำ API ให้กับแผนกอื่นๆ เพื่อมาดึงข้อมูลเกี่ยวกับ User ในระบบที่ผมมีอยู่ ส่งให้เค้าในรูปแบบ Restful (JSON)

ฟังดูก็ปกตินะมีอะไร ถ้า API ที่ให้มีแค่ แผนกอื่นแผนกเดียวที่เอาไปใช้

แต่ !!! มันดันมีมากกว่า 1 นั่นนะสิครับ และที่สำคัญตอนคุย spec กันมันมีแค่แผนกเดียว พอทำไปดันมีคนอื่นจะเอาไปใช้ด้วย ทีนั้นวุ่นวายเลยครับ เพราะความต้องการไม่ตรงกันเลยสักแผนก

ยกตัวอย่าง

ข้อมูล User API ที่ตกลงกันไว้ตอนแรกมีดังนี้

data{
   user{
      "_id" : 1,
      "firstname" : "somchai",
      "lastname" : "jaidee",
      "products" : [
          "/product/1/",
          "/product/2/" 
      ]
      ...
  }
}

นี่เป็นรูปแบบ JSON ที่ตกลงกันไว้กับแผนก A แต่พอมีแผนก B มาใช้ร่วมด้วย

เค้าบอกว่าเค้าอยากรู้ชื่อ product ของ user ว่ามีชื่อว่าอะไรบ้าง เค้าไม่อยากเข้าไปตาม url เพราะเค้าต้องการแค่ชื่อ ไม่ได้ต้องการข้อมูล product ทั้งหมด

เอาละไงครับเราจะทำยังไงละครับ ปรับ API ให้เป็นแบบนี้

data{
   user{
      ...
      "products" : [
          { name : "ADSL" , link : "/product/1/" },
          { name : "Fiber" , link : "/product/2/" }
      ]
      ...
  }
}

ก็ดูดีครับ หึหึ แต่รู้ไหมครับ ถ้าผมเปลี่ยนผมคงต้องคลานเข่าไปขอแผนก A ให้เค้าเปลี่ยนวิธีเรียกใช้ด้วยเพราะเค้าทำไปแล้ว

งั้นแต่ปัญหาง่ายๆ จะได้ไม่กระทบกับแผนก B ละผมว่าหลายๆคนก็คงใช้แบบนี้

ก็สร้าง API ใหม่สำหรับแผนก B ซะเลยสิ

แล้วถ้ามีแผนก C ที่ความต้องการไม่ตรงอีกละ ก็ทำเพิ่มอีก บอกเลยโคตรเหนื่อยยย แค่ API เดียวนะเนี่ย

ผมเจอเยอะเลยครับ ทั้ง พี่ขอเพิ่มอันนี้หน่อยสิ, น้องข้อมูลนี้เอามาทำไมพี่ไม่ได้ใช้เปลือง ( ก็อีกแผนกเค้าใช้อะพี่ TT), น้องเปลี่ยนเป็น snake case (ex. first_name) ได้ไหมพอดีระบบพี่ใช้แบบนี้จะได้เหมือนกันหมด (โห……)
ส่วนเหตุผลว่าทำไมผมต้องไปยอมเค้าด้วย บอกให้เค้าทำตามเราสิ หึหึ แผนกผมลูกเมียน้อยครับเค้าสั่งไร ขอไรก็ต้องทำ TT

รู้สึกดีหลังจากได้ลองเล่น GraphQL

ก่อนอื่นขอบอกก่อนว่าผมเองก็ยังไม่เคยใช้กับ Product จริงนะครับ เพิ่งได้เริ่มศึกษา (ส่วนงานที่ยกตัวอย่างไป มันจบไปละครับ ความทรงจำอันแสนเจ็บปวด)

GraphQL จะช่วยในการแปลงข้อมูลของ API ต่างๆ เป็นไปในรูปแบบที่เราต้องการ ไม่ว่าจะเป็น รูปแบบข้อมูล, ชื่อตัวแปร เป็นต้น

มาเริ่มเล่นกันดีกว่า

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

ไปที่ https://sandbox.learngraphql.com/ จะเป็น Tools ที่ชื่อว่า GraphiQL ที่ทาง kadira ทำไว้ให้เราลองเล่นกัน ( ใครเคยเขียน Meteor.js มาก็คงรู้กัน kadira กันนะครับ)

เข้าไปก็ได้หน้าตาแบบนี้

ตัว Demo ตัวนี้ก็จะมีข้อมูลคร่าวๆ ดังนี้

• blog มีหลาย post.
• แต่ละ post มี 1 คนเขียน แต่อาจจะมีได้หลาย comment.
• แต่ละ comment มี เจ้าของ 1 คน .
• แต่ละ comment อาจจะมีการตอบกลับ.

มาลองเล่นกัน

ใส่ข้อมูลดังนี้ และกัน run

{
  posts {
    _id
    title
    category
    summary
    content
    timestamp
  }
}

ก็จะได้ข้อมูลทั้งหมดของ post นั้นมา

ถ้าอยากได้แค่ title ละ

{
  posts {
    title
  }
}

อยากได้ชื่อคนเขียนละ

{
  posts {
    title,
    author {
      name
    },
  }
}

ไม่อยากได้คำว่า author อะ อยากใช้คำว่า owner ( เรื่องมากจริง )

{
    owners:authors {
      name
    }
}

ถ้าอยากรู้ว่า demo ตัวนี้เราสามารถ query อะไรออกมาดูได้บ้าง คลิกไปที่ Docs ทางด้านมุมขวา

ไปที่ query: BlogSchema ( mutation: BlogMutations เอาไว้คราวหน้านะ เหนื่อยละ )

posts กับ authors เราได้ลองเล่นกันไปแล้ว

ถ้าเราใส่

{
  latestPost {
    title,
    summary
  }
}

เราก็ได้ post ล่าสุดออกมา

ทีนี้มาลองเล่นอะไรที่ต้องใส่ param กันบ้าง

{
  posts(category: PRODUCT) {
    title
    category
    author {
      name 
    }
  }
}

เราก็จะได้ post ที่มี category = PRODUCT ออกมา

ลองอีกที

{
  recentPosts(count: 5) {
    title
    category
  }
}

จะได้ post ล่าสุด 5 post

แต่ถ้าทำแบบนี้

{
  recentPosts {
    title
    category
  }
}

จะได้ errors ออกมาทันที เพราะใน Docs ที่recentPosts(count: Int!) จะมี ! อยู่แปลว่าจะต้องใส่ค่ามาด้วยทุกครับ ในขณะที่ posts(category: PRODUCT) ไม่มี ! จึงทำให้เรียกโดยไม่ใส่ค่าก็ได้ (อย่างที่เราทำไปแล้วในตอนแรก)

โดยสรุปแล้วสำหรับผมมองว่า GraphQL เป็นอะไรที่น่าสนใจเป็นอย่างมาก (ยิ่ง facebook เป็นคนทำก็ยิ่งน่าสนใจ ) มันช่วยให้เราจัดการ API ต่างๆให้เป็นไปตามที่เราต้องการได้ (ยังมีเรื่อง Auto Document, Http Caching, Security และอื่นๆ ให้ได้ใช้กัน )แต่ถ้าพูดถึงเรื่องการนำไปใช้จริงตัวผมเองก็ยังไม่ได้ลอง(ได้แต่เล่นไปวันๆ)

แต่ผมว่าอย่าเพิ่งคิดเรื่องเอาไปใช้ยังไงเลย คิดว่าจะบอกหัวหน้ายังไงให้เค้าเปลี่ยนมาลองใช้ดูดีกว่า (บอกเลยยากมากกกกกกกก)

เอาละครับก็จะพอเห็นภาพกันคร่าวๆ ไว้คราวหน้าจะมาต่อเรื่อง mutation (คือการเอาข้อมูลเข้าไป ) และจะมาลองทำ GraphQL server รวมถึง GraphiQL ไว้ใช้กันเองดูบ้าง

ที่มา : http://graphql.org/ , https://learngraphql.com/