أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا
حافظوا على مصدر واحد للحقيقة من المخطط إلى العميل
أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا درس مجاني في TypeScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في TypeScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
ما المقصود بالنهج المعتمد على المخطط؟
يعني النهج المعتمد على المخطط أن مخطط GraphQL هو المصدر الوحيد للحقيقة. فتُشتق منه أنواع الواجهة الأمامية ودوال الحل في الواجهة الخلفية وعقود API، مما يمنع أي طبقة من الانحراف عن بقية الطبقات.
# 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تعريف المخطط
اكتبوا مخطط GraphQL بصيغة SDL (في ملفات .graphql) وأودعوه في المستودع باعتباره العقد بين العميل والخادم.
# schema.graphql
type User {
id: ID!
name: String!
email: String!
}
type Query {
user(id: ID!): User
}الخادم: إنشاء أنواع دوال الحل
شغّلوا codegen مع المكوّن الإضافي typescript-resolvers لإنشاء تواقيع دوال حل مُنمّطة انطلاقًا من المخطط.
# 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 لاكتشاف تغييرات المخطط غير المتوافقة، مثل إزالة الحقول أو تغيير أنواعها، قبل وصولها إلى بيئة الإنتاج.
npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removedسجل المخطط
يخزّن سجل المخطط (مثل Apollo Studio وHive) إصدارات المخطط، ويتتبع التغييرات بمرور الوقت، وينبّه إلى التغييرات غير المتوافقة في CI.
# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphqlإنشاء بيانات وهمية باستخدام المخطط
استخدموا المخطط لإنشاء بيانات وهمية لتطوير العميل من دون خادم حقيقي، مع الحفاظ على توافق البيانات الوهمية مع المخطط.
import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });tRPC كبديل
بالنسبة إلى المشاريع المعتمدة على TypeScript فقط، يوفر tRPC أمانًا شاملًا من ناحية الأنواع من دون لغة مخطط؛ فنوع موجّه الخادم هو عقد العميل نفسه.
// 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 للتحقق
اجمعوا مخططات Zod مع أدوات التحقق من مدخلات 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: مسار متكامل لأمان المخطط
مسار CI متكامل لضمان أمان النهج المعتمد على المخطط: فحص المخطط → التحقق من التغييرات غير المتوافقة → تشغيل codegen → فحص الأنواع → تشغيل الاختبارات.
# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm testمراجعة: سير العمل المعتمد على المخطط
TypeScript وفق النهج المعتمد على المخطط: تعريف SDL → إنشاء أنواع دوال الحل في الخادم → إنشاء أنواع عمليات العميل → اكتشاف التغييرات غير المتوافقة في CI. ويُعد المخطط المصدر الوحيد للحقيقة لجميع طبقات أمان الأنواع.
تحقق سريع
ما دور مخطط GraphQL في سير عمل يعتمد على المخطط؟
ما تعلمتموه
تشتق عمليات TypeScript المعتمدة على المخطط جميع الأنواع من مخطط GraphQL. أنشئوا أنواع دوال الحل للخادم وأنواع العمليات للعميل، واكتشفوا التغييرات غير المتوافقة في CI، وحافظوا على المخطط باعتباره العقد بين جميع الطبقات.
تعلم TypeScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 101
- الدروس
- 352
الأسئلة الشائعة
هل درس «أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا» مجاني؟
نعم — نص درس «أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة TypeScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة TypeScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا»؟
حافظوا على مصدر واحد للحقيقة من المخطط إلى العميل تتمرن على TypeScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ TypeScript Academy؟
لا تُشترط خبرة سابقة. TypeScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس TypeScript Academy هذا؟
نعم. كل درس في TypeScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تحويل مخطط GraphQL إلى أنواع TypeScript
- المحلِّلات محددة الأنواع باستخدام GraphQL Code Generator
- عميل GraphQL محدد الأنواع باستخدام Apollo وurql
- أمان الأنواع من البداية إلى النهاية: سير عمل المخطط أولًا