0Pricing
TypeScript Academy · บทเรียน

สคีมา GraphQL เป็นชนิด TypeScript

สร้างชนิดจากไฟล์ .graphql ด้วย codegen

สคีมา GraphQL เป็นชนิด TypeScript เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

ปัญหา: สคีมาและชนิดข้อมูลไม่สอดคล้องกัน

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

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

ตัวสร้างโค้ด GraphQL

@graphql-codegen/cli อ่านสคีมา GraphQL ของคุณและสร้างชนิดข้อมูล TypeScript โดยอัตโนมัติ

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript

การกำหนดค่า codegen.yml

กำหนดแหล่งที่มาของสคีมาและตำแหน่งเอาต์พุตใน codegen.yml

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

การเรียกใช้ตัวสร้าง

เรียกใช้ graphql-codegen เพื่อสร้างชนิดข้อมูล TypeScript จากสคีมาของคุณ

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

ตัวอย่างเอาต์พุตที่สร้างขึ้น

ไฟล์ที่สร้างขึ้นประกอบด้วยอินเทอร์เฟซ TypeScript ที่ตรงกับชนิดข้อมูล GraphQL ทุกชนิดในสคีมาของคุณ

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

export type Query = {
  __typename?: "Query";
  user?: Maybe<User>;
};

สคีมาจากจุดปลายทางระยะไกล

เครื่องมือสร้างโค้ดยังสามารถดึงสคีมาจากจุดปลายทาง GraphQL ที่กำลังทำงานอยู่โดยใช้การตรวจสอบภายใน

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

การแมปชนิดข้อมูลสเกลาร์

แมปสเกลาร์ GraphQL แบบกำหนดเองกับชนิดข้อมูล TypeScript ในการกำหนดค่าการสร้างโค้ด

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

การจัดการแจกแจง

การแจกแจง GraphQL จะถูกแมปเป็นการแจกแจงสตริงหรือชนิดยูเนียนของ TypeScript ตามการกำหนดค่าการสร้างโค้ด

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

ค่าที่ไม่เป็นค่าว่างและ Maybe

ฟิลด์ GraphQL ที่อนุญาตให้เป็นค่าว่างจะกลายเป็น Maybe หรือก็คือ T | null | undefined ในชนิดข้อมูลที่สร้างขึ้น เพื่อสะท้อนการอนุญาตให้เป็นค่าว่างของสคีมา

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

การผสานรวมกับซีไอ

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

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

ทบทวน: จากสคีมาสู่ชนิดข้อมูล

ตัวสร้างโค้ด GraphQL อ่านสคีมาของคุณและสร้างชนิดข้อมูล TypeScript โดยอัตโนมัติ กำหนดค่าด้วย codegen.yml เรียกใช้ graphql-codegen และผสานรวมเข้ากับซีไอเพื่อป้องกันไม่ให้สคีมาและชนิดข้อมูลคลาดเคลื่อน

ตรวจสอบอย่างรวดเร็ว

จุดประสงค์หลักของตัวสร้างโค้ด GraphQL คืออะไร

สิ่งที่คุณได้เรียนรู้

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

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

บทเรียน “สคีมา GraphQL เป็นชนิด TypeScript” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สคีมา GraphQL เป็นชนิด TypeScript” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สคีมา GraphQL เป็นชนิด TypeScript”

สร้างชนิดจากไฟล์ .graphql ด้วย codegen คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “สคีมา GraphQL เป็นชนิด TypeScript” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. สคีมา GraphQL เป็นชนิด TypeScript
  2. ตัวแก้ไข GraphQL ที่ระบุชนิดด้วย GraphQL Code Generator
  3. ไคลเอนต์ GraphQL ที่ระบุชนิดด้วย Apollo และ urql
  4. ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา
← กลับไปที่ TypeScript Academy