บทช่วยสอน GraphQL สำหรับผู้เริ่มต้น: คุณสมบัติและตัวอย่างคืออะไร

GraphQL คืออะไร

GraphQL เป็นเทคโนโลยีฝั่งเซิร์ฟเวอร์ของเลเยอร์แอปพลิเคชันที่พัฒนาโดย Facebook เพื่อดำเนินการค้นหาด้วยข้อมูลที่มีอยู่ GraphQL สามารถเพิ่มประสิทธิภาพการเรียก RESTful API ได้ เป็นวิธีการดึงข้อมูลและอัปเดตข้อมูลของคุณอย่างเปิดเผย GraphQL ช่วยให้คุณโหลดข้อมูลจากเซิร์ฟเวอร์ไปยังไคลเอนต์ ช่วยให้โปรแกรมเมอร์สามารถเลือกประเภทของคำขอที่ต้องการได้

เหตุใดจึงต้องใช้ GraphQL

ต่อไปนี้คือเหตุผลในการใช้ GraphQL:

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

การประยุกต์ใช้ GraphQL

นี่คือแอปพลิเคชันที่สำคัญของ GraphQL:

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

คุณต้องเรียนรู้อะไรบ้างก่อนเรียน GraphQl

บทช่วยสอน GraphQL นี้อิงตาม รวดเร็ว และ โหนดJs- ดังนั้นคุณสามารถเรียนรู้ GraphQL ได้อย่างง่ายดายด้วยความเข้าใจพื้นฐานของ NodeJS

ส่วนประกอบสำคัญของ GraphQL

ในบทช่วยสอน GraphQL นี้ เราจะมาเรียนรู้องค์ประกอบสำคัญของ GraphQL กัน:

ดังที่แสดงในรูปด้านบน GraphQL มีองค์ประกอบหลักสามส่วน: 1) แบบสอบถาม 2) ตัวแก้ไข และ 3) สคีมา

สอบถาม

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

ส่วนของแบบสอบถาม:

ต่อไปนี้เป็นส่วนสำคัญของการค้นหา

1. สนาม:

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

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

ในตัวอย่าง GraphQL ข้างต้น เราถามเซิร์ฟเวอร์สำหรับฟิลด์ที่เรียกว่าทีมและฟิลด์ย่อยเช่น id และชื่อ เซิร์ฟเวอร์ GraphQL ส่งคืนข้อมูลที่เราขอ

2. ข้อโต้แย้ง

In RESTเราสามารถส่งชุดอาร์กิวเมนต์เพียงชุดเดียวเป็นเซกเมนต์ URL และพารามิเตอร์การค้นหาได้เท่านั้น หากต้องการรับโปรไฟล์เฉพาะ การเรียก REST ทั่วไปจะมีลักษณะดังต่อไปนี้:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

แก้

ตัวแก้ปัญหาให้คำแนะนำในการแปลงการทำงานของ GraphQL เป็นข้อมูล โดยจะแก้ไขแบบสอบถามเป็นข้อมูลด้วยการกำหนดฟังก์ชันตัวแก้ปัญหา

จะแสดงเซิร์ฟเวอร์กระบวนการตลอดจนตำแหน่งในการดึงข้อมูลตามฟิลด์เฉพาะ ตัวแก้ไขยังแยกสคีมาฐานข้อมูลและสคีมา API อีกด้วย ข้อมูลที่แยกออกมาช่วยในการแก้ไขเนื้อหาที่ได้รับจากฐานข้อมูล

schema

สคีมา GraphQL เป็นศูนย์กลางของการนำ GraphQL ไปใช้ โดยจะอธิบายฟังก์ชันการทำงานที่ไคลเอ็นต์กำลังเชื่อมต่ออยู่

คุณสมบัติของ GraphQL

คุณสมบัติที่สำคัญของ GraphQL มีดังนี้

• มีภาษาคิวรีที่เปิดเผยซึ่งไม่จำเป็น
• มีลำดับชั้นและเน้นที่ผลิตภัณฑ์
• GraphQL มีการกำหนดประเภทอย่างเข้มงวด ซึ่งหมายความว่ามีการดำเนินการค้นหาภายในบริบทของระบบเฉพาะ
• ข้อความค้นหาใน GraphQL จะถูกเข้ารหัสในไคลเอนต์ ไม่ใช่ในเซิร์ฟเวอร์
• มีคุณลักษณะทั้งหมดของเลเยอร์แอปพลิเคชันของโมเดล OSI

ลูกค้า GraphQL

ไคลเอนต์ GraphQL เป็นรหัสที่สร้างคำขอ POST ไปยังเซิร์ฟเวอร์ GraphQL ที่เกี่ยวข้อง คุณสามารถสืบค้น GraphQL API ได้โดยตรง แต่แนวทางที่ดีคือการใช้ประโยชน์จากไลบรารีไคลเอนต์เฉพาะโดยใช้ Relay

JavaFacebook พัฒนาไลบรารีสคริปต์สำหรับสร้างแอปพลิเคชัน React ด้วย GraphQL ไคลเอนต์ GraphQL อาจเป็น CMS เช่น Drupal แอปพลิเคชันหน้าเดียว แอปพลิเคชันมือถือ เป็นต้น

เซิร์ฟเวอร์ GraphQL

เซิร์ฟเวอร์ GraphQL เป็นการใช้งานฝั่งเซิร์ฟเวอร์ตามข้อกำหนดของ GraphQL มันแสดงให้เห็นข้อมูลของคุณเป็น GraphQL API ซึ่งโปรแกรมไคลเอนต์ของคุณสามารถค้นหาได้ ฐานข้อมูล.

เกตเวย์ GraphQL

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

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

1. แทนที่ค่าคงที่ในแบบสอบถามด้วยชื่อตัวแปร
2. ประกาศชื่อตัวแปรเป็นหนึ่งในตัวแปรที่แบบสอบถาม GraphQL ยอมรับ
3. ส่งผ่านค่าในพจนานุกรมตัวแปรเฉพาะการขนส่ง

นี่คือสิ่งที่ดูเหมือนทั้งหมด:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

ดังที่คุณเห็นในตัวอย่าง GraphQL ข้างต้น เราได้ส่งผ่านตัวแปรอื่นนอกเหนือจากที่จำเป็นในการสร้างแบบสอบถามใหม่

การกลายพันธุ์คืออะไร?

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

สิ่งที่ควรพิจารณาขณะออกแบบการกลายพันธุ์ของ GraphQL

นี่คือประเด็นสำคัญในการออกแบบ GraphQL:

• การตั้งชื่อ: ก่อนอื่น คุณต้องตั้งชื่อกริยาการกลายพันธุ์ของคุณก่อน จากนั้นคำนามหรือ “วัตถุ” ถ้ามี ใช้ CamelCase ขณะตั้งชื่อการกลายพันธุ์
• ความจำเพาะ: คุณต้องทำให้การกลายพันธุ์มีความเฉพาะเจาะจงมากที่สุดเท่าที่จะเป็นไปได้ การกลายพันธุ์ควรแสดงถึงการกระทำทางความหมายที่ผู้ใช้ทำ
• วัตถุอินพุต: ใช้ประเภทออบเจ็กต์อินพุตที่ไม่ซ้ำใครและจำเป็นเป็นอาร์กิวเมนต์สำหรับดำเนินการเปลี่ยนรูปแบบบนไคลเอนต์
• ประเภทเพย์โหลดที่ไม่ซ้ำ: คุณควรใช้ประเภทเพย์โหลดที่ไม่ซ้ำกันสำหรับการกลายพันธุ์ทุกครั้ง คุณยังสามารถเพิ่มเอาต์พุตการกลายพันธุ์เป็นฟิลด์ให้กับประเภทเพย์โหลดนั้นได้
• การทำรัง: ใช้การซ้อนกับการกลายพันธุ์ของคุณทุกที่ที่เหมาะสม ช่วยให้คุณใช้ GraphQL API ได้อย่างเต็มที่

ความแตกต่างระหว่าง GraphQL และ REST

ตารางต่อไปนี้แสดงให้เห็นความแตกต่างที่สำคัญระหว่าง GraphQL และส่วนที่เหลือ.

GraphQL	REST
เป็นไปตามสถาปัตยกรรมที่ขับเคลื่อนโดยไคลเอนต์	เป็นไปตามสถาปัตยกรรมที่ขับเคลื่อนโดยเซิร์ฟเวอร์
GraphQL สามารถจัดระเบียบได้ในแง่ของสคีมา	REST สามารถจัดระเบียบได้ในแง่ของปลายทาง
GraphQL เป็นชุมชนที่กำลังเติบโต	REST เป็นชุมชนขนาดใหญ่มาก
ความเร็วการพัฒนาใน GraphQL นั้นรวดเร็ว	ความเร็วการพัฒนาใน REST ช้า
เส้นโค้งการเรียนรู้ใน GraphQL นั้นยาก	เส้นโค้งการเรียนรู้ใน REST อยู่ในระดับปานกลาง
ข้อมูลระบุตัวตนจะแยกออกจากวิธีที่คุณดึงข้อมูล	ตำแหน่งข้อมูลที่คุณเรียกใช้ใน REST คือข้อมูลประจำตัวของออบเจ็กต์เฉพาะ
ใน GraphQL เซิร์ฟเวอร์จะกำหนดทรัพยากรที่มีอยู่	รูปร่างและขนาดของทรัพยากรถูกกำหนดโดยเซิร์ฟเวอร์ใน REST
GraphQL ให้ความสม่ำเสมอสูงในทุกแพลตฟอร์ม	เป็นการยากที่จะได้รับความสม่ำเสมอในทุกแพลตฟอร์ม

แอปและเครื่องมือโอเพ่นซอร์สที่ใช้โดย GraphQL

แอพและเครื่องมือโอเพ่นซอร์สที่สำคัญที่ใช้โดย GraphQL มีดังนี้:

• Gatsby: Gastby เป็นแอปพลิเคชันที่ขับเคลื่อนโดย GraphQL ซึ่งสามารถใช้ข้อมูลที่ได้มาจากแหล่ง GraphQL API มากกว่าหนึ่งแหล่ง คุณสามารถใช้มันเพื่อพัฒนาแอปพลิเคชัน React แบบคงที่และแบบไคลเอนต์
• GraphiQL: เป็น ID ที่ทำงานร่วมกับเบราว์เซอร์และโต้ตอบกับ API ของ GraphQL ฟังก์ชันบางอย่างที่ GraphiQL มีได้แก่ การกลายพันธุ์ การสืบค้นข้อมูล และการเติมข้อความอัตโนมัติ
• สนามเด็กเล่น GraphQL: เป็น IDE อันทรงพลังที่มีตัวแก้ไขในตัวสำหรับจัดการการเปลี่ยนแปลง การตรวจสอบ การสืบค้น GraphQl การสมัครสมาชิก ฯลฯ นักพัฒนาสามารถใช้ IDE นี้เพื่อแสดงภาพโครงสร้างของสคีมาได้
• Prisma: Prisma เป็นเลเยอร์การแยกฐานข้อมูลที่เปลี่ยนฐานข้อมูลของคุณให้เป็น GraphQL API ด้วยการดำเนินการ CRUD (สร้าง อ่าน อัปเดต และลบ)
• บิต: เป็นเครื่องมือและแพลตฟอร์มโอเพ่นซอร์สที่แปลงโค้ดที่ใช้ซ้ำได้เป็นส่วนประกอบ นักพัฒนาสามารถใช้เพื่อแบ่งปันและพัฒนาโครงการต่างๆ

สรุป

• GraphQL เป็นเทคโนโลยีฝั่งเซิร์ฟเวอร์ของเลเยอร์แอปพลิเคชันที่พัฒนาโดย Facebook เพื่อดำเนินการค้นหาด้วยข้อมูลที่มีอยู่
• คุณสามารถใช้ GraphQL เพื่อดึงข้อมูลด้วยการเรียก API เพียงครั้งเดียว
• GraphQL ช่วยให้คุณปรับปรุงประสิทธิภาพของแอพมือถือ
• องค์ประกอบการสืบค้น GraphQL ที่สำคัญคือ: 1) การสืบค้น 2) ตัวแก้ไข 3) สคีมา
• GraphQL มีการกำหนดประเภทอย่างเข้มงวด ซึ่งหมายความว่ามีการดำเนินการค้นหาภายในบริบทของระบบเฉพาะ
• ไคลเอนต์ GraphQL เป็นรหัสที่สร้างคำขอ POST ไปยังเซิร์ฟเวอร์ GraphQL ที่เกี่ยวข้อง
• เซิร์ฟเวอร์ GraphQL เป็นการใช้งานฝั่งเซิร์ฟเวอร์ตามข้อกำหนดของ GraphQL
• Gateway คือรูปแบบไมโครเซอร์วิสที่คุณสามารถสร้างบริการแยกต่างหากเพื่อรับมือกับบริการแบ็กเอนด์อื่นๆ ได้
• GraphQL มีวิธีที่ดีในการแยกตัวประกอบค่าไดนามิกออกจากแบบสอบถาม
• การกลายพันธุ์เป็นวิธีหนึ่งในการเปลี่ยนแปลงชุดข้อมูลใน GraphQL
• จุดสำคัญในการออกแบบ GraphQL คือ: 1) การตั้งชื่อ 2) ความเฉพาะเจาะจง 3) ประเภทเพย์โหลดที่ไม่ซ้ำของออบเจ็กต์อินพุต และ 4) การซ้อน
• GraphQL สามารถจัดระเบียบได้ในแง่ของสคีมา ในขณะที่ REST สามารถจัดระเบียบได้ในแง่ของอุปกรณ์ปลายทาง
• ข้อเสียของ GraphQL คือขาดทรัพยากรในส่วนแบ็กเอนด์