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

GraphQL คืออะไร

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

คุณจำเป็นต้องเรียนรู้อะไรบ้างก่อนที่จะเรียน GraphQL?

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

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

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

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

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

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

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

ผลประโยชน์เหล่านั้นล้วนขึ้นอยู่กับองค์ประกอบสามส่วนที่ทำงานร่วมกัน

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

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

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

สอบถาม

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

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

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

1. สนาม:

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

query {
    team {
        id
        name
    }
}

เซิร์ฟเวอร์จะตอบกลับด้วยเอกสาร JSON ที่มีรูปแบบตรงกับคำขอ:

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

ในตัวอย่าง GraphQL ข้างต้น เราขอข้อมูลจากเซิร์ฟเวอร์ในส่วนของฟิลด์ที่ชื่อว่า team และฟิลด์ย่อยต่างๆ เช่น id และ name เซิร์ฟเวอร์ 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. ส่งผ่านค่าในพจนานุกรมตัวแปรเฉพาะการขนส่ง

นี่คือภาพรวมทั้งหมด เริ่มจากคำสั่ง SQL ที่ประกาศตัวแปร:

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 ได้อย่างเต็มที่

การสอบถามข้อมูลเป็นการอ่าน และการเปลี่ยนแปลงข้อมูลเป็นการเขียนข้อมูล ประเภทการดำเนินการที่สามครอบคลุมข้อมูลที่เปลี่ยนแปลงขณะที่ไคลเอ็นต์ยังคงเชื่อมต่ออยู่

Subscription ใน GraphQL คืออะไร?

A การสมัครสมาชิก การสมัครรับข้อมูล (Subscription) เป็นประเภทการดำเนินการที่สามในข้อกำหนด GraphQL นอกเหนือจากการสืบค้น (Query) และการเปลี่ยนแปลงข้อมูล (Mutation) การสืบค้นและการเปลี่ยนแปลงข้อมูลแต่ละอย่างจะเสร็จสมบูรณ์ในคำขอและการตอบกลับเพียงครั้งเดียว ในขณะที่การสมัครรับข้อมูลจะรักษาการเชื่อมต่อที่มีอายุการใช้งานยาวนาน โดยปกติผ่าน WebSockets เพื่อให้เซิร์ฟเวอร์ส่งผลลัพธ์ใหม่ไปยังไคลเอ็นต์ทุกครั้งที่เกิดเหตุการณ์ที่กำหนด

รูปแบบไวยากรณ์คล้ายกับคำสั่งค้นหา โดยใช้คำหลัก subscription แทนคำว่า query:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

มีสามประเด็นสำคัญที่ทำให้การสมัครสมาชิกแตกต่างกันในทางปฏิบัติ

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

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

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

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

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

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

คำถามที่พบบ่อย