React : GraphQL เบื้องต้น (ตอนที่ 1/2)

บล็อกนี้จะเป็นเรื่องของ React ที่เรียกข้อมูลผ่าน GraphQL โดยปกติแล้ว เวลาเราเรียกใช้ข้อมูลจาก API ที่ผ่านเว็บเซอร์วิสจะเรียกผ่าน Rest API จะรับส่งข้อมูลกันในรูปแบบของ JSON format ซะส่วนใหญ่ ทำให้เราคุ้นเคยกับการใช้งาน JSON ในการรับส่งข้อมูลผ่าน Rest API กันอยู่แล้ว วันนี้เราจะมาพูดถึงการรับส่งข้อมูลอีกแบบหนึ่งที่ชื่อว่า GraphQL ซึ่งจะเป็นการรับส่งผ่านข้อมูลที่ใช้ส่งผ่าน API และเว็บเซอร์วิสเช่นเดียวกันกับ Rest API แต่ลักษณะการรับส่งข้อมูลนั้นจะแตกต่างกัน

บล็อกของเรื่อง GraphQL เบื้องต้นจะแยกเป็น 2 บทความ

บทความแรก จะเป็นการเรียนรู้เรื่องของ GraphQL เครื่องมือที่ใช้สร้างข้อมูล ทดสอบ API และการเตรียมความพร้อม โปรเจค React
บทความที่สอง จะเป็นการลงมือเขียนโค้ด React เพื่อเรียกใช้งาน GraphQL ด้วย apollo-client

ทำความรู้จักกับ GraphQL

GraphQL เป็นภาษา query language (เหมือน sql) สำหรับเว็บเซอร์วิส API และการรันเพื่อดึงข้อมูลผลลัพธ์จากข้อมูลที่มีอยู่ GraphQL จะเตรียมคำอธิบายของข้อมูลใน API ที่สมบูรณ์และสามารถเข้าใจได้ สามารถทำให้ client ที่เรียกใช้งานนั้นจะดึงข้อมูลได้ตามที่ต้องการ

ลักษณะของการดึงข้อมูลด้วย GraphQL

การดึงข้อมูล จะใช้ลักษณะโครงสร้างแบบ GraphQL โดยจะระบุ ชื่อ scheme และ property ที่ต้องการเรียกดูข้อมูล

ตัวอย่าง จะเรียกข้อมูล name, height, mass จาก scheme ชื่อว่า hero จะเขียนคำสั่ง query ของ GraphQL ได้ดังนี้

{
     hero{
         name
         height
         mass
      }
}

ผลลัพธ์ที่ได้จะส่งกลับมาในรูปแบบ JSON

{
     "hero":{
          "name":"Luke Skywalker",
          "height": 1.72,
          "mass": 77
     }
}

เตรียมข้อมูลและ API ที่ส่งค่าเป็น GraphQL

ตัวอย่างนี้จะใช้วิธีการสร้าง API และ ข้อมูลในรูปแบบ GraphQL จากเว็บไซต์ https://graphcms.com/ เป็นระบบที่ให้สร้าง content และให้บริการข้อมูลในรูปแบบ GraphQL ด้วย สามารถทดลองใช้ได้ฟรี วิธีการใช้งานไม่ยาก ให้สร้าง scheme แล้วกำหนดชื่อฟิวด์ไปได้เลยจะเอาชนิดไหน

ตัวอย่างจะสร้าง scheme ชื่อ vocab จะเอาไว้เก็บคลังคำศัพท์ (คำศัพท์เกี่ยวกับกฏหมาย) ซึ่งประกอบด้วยฟิวด์ 2 ฟิวด์ คือ

vocab เป็นคำศัพท์ (string)
meaning เป็นความหมาย (string)

เมื่อสร้างเสร็จแล้วให้ ใส่ข้อมูลเข้าไปด้วย

จากนั้นให้มาทดสอบ API โดยการค้นหาข้อมูลตาม โครงสร้างที่เราต้องการ เช่น ต้องการข้อมูลเฉพาะ id, vocab, meaning จะใช้คำสั่ง graphql และผลรันคำสั่งจะได้ตามรูปด้านล่าง

เรียกดู API URL ที่เราจะเอาไว้ใช้งานที่ เมนู Setting > API Access

ก๊อปปี้ Content API url มาใช้งานได้เลย

ตัวอย่างจะใช้ Content API URL เป็น https://api-ap-northeast-1.graphcms.com/v2/cktefu37f2up601z78q95htoq/master

เพื่อนๆ สามารถนำ Content API นี้ไปทดสอบ ดึงข้อมูลได้ด้วยโปรแกรม Postman ได้ดังนี้

โดยเลือก method เป็น POST แล้วใส่ Content API URL เข้าไป จากนั้น เลือก Body เป็น GraphQL และใส่คำสั่ง query ไปตามตัวอย่าง

query VocabsQuery {
  vocabs {
    meaning
    id
    vocab
  }
}

เสร็จเรียบร้อยแล้ว ให้กด Send ทดสอบ API ได้เลย

การติดตั้งไลบรารี่เพิ่มเพื่อเรียกใช้งาน GraphQL ใน React

การเรียกใช้งาน GraphQL ใน React จะต้องติดตั้ง library ที่มีฟังก์ชันในการเรียกใช้ GraphQL ได้ ในบล็อกนี้จะใช้ apollo-client

หลังจากที่ติดตั้ง React Project เรียบร้อยแล้ว ให้ทำการติดตั้ง apollo-client และ graphql เพิ่มเติมดังนี้

npm install @apollo/client graphql

ในตัวอย่าง จะใช้การเขียนโค้ดบน codesandbox.io และเราต้องติดตั้ง library เพิ่มเติมได้แก่ @apollo/client (ชื่อใน npm จะต้องใช้ตามนี้) และ graphql โดยเลือกค้นหาที่ช่องค้นหาไลบรารี่ได้เลย ตามภาพด้านล่าง

ติดตามบทความในตอนที่ 2 จะเป็นเรื่องของการเขียนโปรแกรม React เพื่อเรียกใช้งาน GraphQL นะครับ

อ่านต่อ React : GraphQL เบื้องต้น (ตอนที่ 2/2)

สรุป

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

อ้างอิง

Post Views: 2,980