ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา
รักษาแหล่งความจริงเพียงหนึ่งเดียวตั้งแต่สคีมาจนถึงไคลเอนต์
ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
แนวทางเริ่มต้นด้วย schema คืออะไร
แนวทางเริ่มต้นด้วย schema หมายถึงการให้ schema ของ GraphQL เป็นแหล่งความจริงเดียว ชนิดข้อมูลฝั่งหน้า ตัวแก้ไขการทำงานฝั่งหลัง และสัญญา API ล้วนสร้างขึ้นจาก schema เดียวกัน จึงป้องกันไม่ให้ชั้นใดมีข้อมูลไม่สอดคล้องกัน
# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in syncการกำหนด schema
เขียน schema ของ GraphQL ใน SDL (ไฟล์ .graphql) แล้วบันทึกลงคลังโค้ดเพื่อใช้เป็นสัญญาระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์
# schema.graphql
type User {
id: ID!
name: String!
email: String!
}
type Query {
user(id: ID!): User
}เซิร์ฟเวอร์: สร้างชนิดข้อมูลของตัวแก้ไขการทำงาน
เรียกใช้ codegen พร้อมปลั๊กอิน typescript-resolvers เพื่อสร้างลายเซ็นของตัวแก้ไขการทำงานที่มีชนิดข้อมูลจาก schema
# Server codegen step
npx graphql-codegen --config codegen.server.ymlไคลเอ็นต์: สร้างชนิดข้อมูลของการดำเนินการ
เรียกใช้ codegen พร้อม typescript-operations และปลั๊กอินของ Apollo/urql เพื่อสร้างฮุกที่มีชนิดข้อมูลจากไฟล์การดำเนินการ .graphql
# Client codegen step
npx graphql-codegen --config codegen.client.ymlการตรวจจับการเปลี่ยนแปลงที่ส่งผลกระทบ
ใช้ graphql-inspector เพื่อตรวจจับการเปลี่ยนแปลง schema ที่ส่งผลกระทบ เช่น การลบฟิลด์หรือเปลี่ยนชนิดข้อมูล ก่อนที่การเปลี่ยนแปลงเหล่านั้นจะไปถึงระบบจริง
npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removedคลัง schema
คลัง schema เช่น Apollo Studio และ Hive จัดเก็บรุ่นของ schema ติดตามการเปลี่ยนแปลงตามเวลา และแจ้งเตือนเมื่อพบการเปลี่ยนแปลงที่ส่งผลกระทบใน CI
# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphqlการสร้างข้อมูลจำลองด้วย schema
ใช้ schema เพื่อสร้างข้อมูลจำลองสำหรับพัฒนาไคลเอ็นต์โดยไม่ต้องมีเซิร์ฟเวอร์จริง ทำให้ข้อมูลจำลองสอดคล้องกับ schema
import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });tRPC เป็นทางเลือก
สำหรับโครงการที่ใช้ TypeScript เท่านั้น tRPC มอบความปลอดภัยด้านชนิดข้อมูลตั้งแต่ต้นจนจบโดยไม่ต้องใช้ภาษาสำหรับ schema โดยชนิดข้อมูลของ router ฝั่งเซิร์ฟเวอร์ IS สัญญาของไคลเอ็นต์
// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();Zod + tRPC สำหรับการตรวจสอบความถูกต้อง
ผสาน schema ของ Zod เข้ากับตัวตรวจสอบ input ของ tRPC เพื่อให้ตรวจสอบความถูกต้องขณะทำงาน และได้ชนิดข้อมูลขณะคอมไพล์จากคำจำกัดความเดียวกัน
const createUser = t.procedure
.input(z.object({ name: z.string(), email: z.string().email() }))
.mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schemaCI: ขั้นตอนความปลอดภัยของ schema แบบครบวงจร
ขั้นตอน CI ที่สมบูรณ์สำหรับความปลอดภัยตามแนวทางเริ่มต้นด้วย schema ได้แก่ ตรวจสอบรูปแบบ schema → ตรวจสอบการเปลี่ยนแปลงที่ส่งผลกระทบ → เรียกใช้ codegen → ตรวจสอบชนิดข้อมูล → ทำการทดสอบ
# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm testสรุป: กระบวนการทำงานแบบเริ่มต้นด้วย schema
TypeScript แบบเริ่มต้นด้วย schema: กำหนด SDL → สร้างชนิดข้อมูลของตัวแก้ไขการทำงานฝั่งเซิร์ฟเวอร์ → สร้างชนิดข้อมูลของการดำเนินการฝั่งไคลเอ็นต์ → ตรวจจับการเปลี่ยนแปลงที่ส่งผลกระทบใน CI โดย schema เป็นแหล่งความจริงเดียวสำหรับความปลอดภัยด้านชนิดข้อมูลทุกชั้น
ตรวจสอบความเข้าใจ
schema ของ GraphQL มีบทบาทอย่างไรในกระบวนการทำงานแบบเริ่มต้นด้วย schema
สิ่งที่คุณได้เรียนรู้
กระบวนการทำงานของ TypeScript แบบเริ่มต้นด้วย schema สร้างชนิดข้อมูลทั้งหมดจาก schema ของ GraphQL สร้างชนิดข้อมูลของตัวแก้ไขการทำงานสำหรับเซิร์ฟเวอร์และชนิดข้อมูลของการดำเนินการสำหรับไคลเอ็นต์ ตรวจจับการเปลี่ยนแปลงที่ส่งผลกระทบใน CI และดูแล schema ให้เป็นสัญญาระหว่างทุกชั้น
คำถามที่พบบ่อย
บทเรียน “ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา”
รักษาแหล่งความจริงเพียงหนึ่งเดียวตั้งแต่สคีมาจนถึงไคลเอนต์ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สคีมา GraphQL เป็นชนิด TypeScript
- ตัวแก้ไข GraphQL ที่ระบุชนิดด้วย GraphQL Code Generator
- ไคลเอนต์ GraphQL ที่ระบุชนิดด้วย Apollo และ urql
- ความปลอดภัยของชนิดตั้งแต่ต้นจนจบ: เวิร์กโฟลว์เริ่มจากสคีมา