Tokopedia-Lite ใช้ GraphQL อย่างไร

https://www.bram.us/2017/06/27/full-stack-react-graphql-tutorial/

ที่ Tokopedia เราใช้เทคโนโลยีอัจฉริยะจำนวนมากเพื่อให้ลูกค้าพึงพอใจ GraphQL เป็นหนึ่งในเทคโนโลยีที่เรานำมาใช้ในตอนท้าย

GraphQL

ก่อนที่เราจะอธิบายเกี่ยวกับวิธีการใช้งานใน Tokopedia เราจะอธิบายว่า GraphQL คืออะไร เรามีข้อมูลสรุปจากเว็บไซต์ทางการของ GraphQL

https://graphql.org/
GraphQL เป็นภาษาคิวรีสำหรับ API และรันไทม์สำหรับตอบสนองคิวรี่เหล่านั้นด้วยข้อมูลที่มีอยู่ของคุณ GraphQL ให้คำอธิบายที่สมบูรณ์และเข้าใจได้ของข้อมูลใน API ของคุณให้ลูกค้ามีอำนาจในการขอสิ่งที่พวกเขาต้องการและไม่มีอะไรเพิ่มเติมทำให้ง่ายต่อการพัฒนา API เมื่อเวลาผ่านไปและเปิดใช้งานเครื่องมือสำหรับนักพัฒนาที่มีประสิทธิภาพ

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

GraphQL รวมกับ API ที่มีอยู่

Tokopedia-Lite

Tokopedia-Lite เป็นรุ่นไฟจากเว็บไซต์มือถือ tokopedia ในตอนแรกเว็บไซต์มือถือ tokopedia ถูกสร้างขึ้นด้วย Perl เพื่อให้บรรลุความพึงพอใจของลูกค้าเราจึงตัดสินใจปรับปรุงไซต์มือถือของเราและสร้างใหม่ด้วย ReactJS ต่อไปนี้เป็นสแต็คเทคโนโลยีที่ใช้โดย Tokopedia-Lite:

  1. ReactJS
  2. Webpack
  3. GraphQL (เราใช้ Apollo สำหรับลูกค้าและเซิร์ฟเวอร์)
  4. EmotionJS
  5. ที่จอแจอึกทึก
  6. ฯลฯ

* หมายเหตุ: บทความอื่นจะอธิบายอย่างลึกซึ้งยิ่งขึ้นเกี่ยวกับ Tokopedia-Lite

Tokopedia-Lite Journey

GraphQL - Tokopedia-Lite

ที่ Tokopedia เรามีเผ่าหลายเผ่าแต่ละเผ่ามีพื้นที่โฟกัสของตนเอง ตัวอย่างเช่น Tribe Discovery มุ่งเน้นไปที่การช่วยเหลือผู้ใช้ค้นหาผลิตภัณฑ์ในตลาดได้อย่างง่ายดาย Tribe Digital มุ่งเน้นการขายผลิตภัณฑ์ดิจิทัลเช่น recharge (pulsa) ตั๋วรถไฟตั๋วเหตุการณ์เป็นต้นดังนั้นในหน้าเดียวเราอาจต้องเรียก API ที่แตกต่างกันหลายตัวจากทีมที่แตกต่างกัน

สถาปัตยกรรม Tokopedia-Lite & GraphQL

บ้านกรณี

หน้าแรก Tokopedia-Lite

หากเราดูรูปภาพที่ Home page Tokopedia-Lite เราต้องทำการเรียกไปยัง 5 API ที่แตกต่างกันอย่างน้อยที่สุด หาก Tokopedia-Lite ไม่ได้ใช้ GraphQL จะมีเครือข่ายไปกลับ 5 รอบระหว่างไคลเอนต์และเซิร์ฟเวอร์และนั่นจะทำให้หน้าแรกของเราช้าและทำให้ผู้ใช้รอนานเกินไปที่จะทำให้การแสดงผลหน้าแรกของเราสมบูรณ์ อย่างไรก็ตามเนื่องจากเราใช้ GraphQL ใน Tokopedia-Lite ลูกค้าของเราต้องการการเรียก API ไปยังเซิร์ฟเวอร์หนึ่งครั้งและเซิร์ฟเวอร์ GraphQL จะดำเนินการส่วนที่เหลือ (ทำการเรียก API 5 เท่าไปยัง 5 API ที่แตกต่างกัน) นั่นทำให้ Tokopedia Lite เร็วขึ้นและมีประสิทธิภาพมากขึ้น

ขุมทรัพย์

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

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

Redisกลไกแคช

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