TypeScript Academy · पाठ

शुरू से अंत तक प्रकार-सुरक्षा: स्कीमा-प्रथम कार्यप्रवाह

स्कीमा से क्लाइंट तक सत्य का एकल स्रोत बनाए रखें

पाठ 4, कुल 4 में से13 चरण

शुरू से अंत तक प्रकार-सुरक्षा: स्कीमा-प्रथम कार्यप्रवाह, CoddyKit पर TypeScript Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह TypeScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Schema-First क्या है

Schema-first का अर्थ है कि GraphQL 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 परिभाषित करना

अपना GraphQL schema SDL (.graphql फ़ाइलों) में लिखें और क्लाइंट तथा सर्वर के बीच अनुबंध के रूप में उसे रिपॉज़िटरी में कमिट करें।

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

सर्वर: रिज़ॉल्वर प्रकार जनरेट करना

schema से टाइपयुक्त रिज़ॉल्वर हस्ताक्षर जनरेट करने के लिए typescript-resolvers प्लगइन के साथ codegen चलाएँ।

# Server codegen step
npx graphql-codegen --config codegen.server.yml

क्लाइंट: ऑपरेशन प्रकार जनरेट करना

.graphql ऑपरेशन फ़ाइलों से टाइपयुक्त हुक जनरेट करने के लिए typescript-operations और Apollo/urql प्लगइन के साथ codegen चलाएँ।

# Client codegen step
npx graphql-codegen --config codegen.client.yml

ब्रेकिंग परिवर्तन का पता लगाना

ब्रेकिंग schema परिवर्तनों (फ़ील्ड हटाने या प्रकार बदलने) का उत्पादन तक पहुँचने से पहले पता लगाने के लिए graphql-inspector का उपयोग करें।

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 के साथ मॉकिंग

वास्तविक सर्वर के बिना क्लाइंट विकास के लिए मॉक data जनरेट करने हेतु 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 भाषा के बिना शुरू से अंत तक type safety उपलब्ध कराता है — सर्वर router का प्रकार ही क्लाइंट अनुबंध होता है।

// 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 schema को tRPC input validators के साथ संयोजित करें।

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 schema

CI: पूर्ण Schema Safety Pipeline

Schema-first safety के लिए पूर्ण CI pipeline: schema की लिंट जाँच → ब्रेकिंग परिवर्तनों की जाँच → codegen चलाना → प्रकार जाँचना → tests चलाना।

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

पुनरावलोकन: Schema-First वर्कफ़्लो

Schema-first TypeScript: SDL परिभाषित करें → सर्वर रिज़ॉल्वर प्रकार जनरेट करें → क्लाइंट ऑपरेशन प्रकार जनरेट करें → CI में ब्रेकिंग परिवर्तनों का पता लगाएँ। सभी type safety परतों के लिए schema ही सत्य का एकमात्र स्रोत है।

त्वरित जाँच

Schema-first वर्कफ़्लो में GraphQL schema की क्या भूमिका है?

इंटरैक्टिव पाठ में इसका उत्तर दें

आपने क्या सीखा

Schema-first TypeScript वर्कफ़्लो सभी प्रकार GraphQL schema से प्राप्त करते हैं। सर्वर के लिए रिज़ॉल्वर प्रकार और क्लाइंट के लिए ऑपरेशन प्रकार जनरेट करें, CI में ब्रेकिंग परिवर्तनों का पता लगाएँ और सभी परतों के बीच अनुबंध के रूप में schema को बनाए रखें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ TypeScript सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 101
पाठ: 352

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “शुरू से अंत तक प्रकार-सुरक्षा: स्कीमा-प्रथम कार्यप्रवाह” पाठ निःशुल्क है?

हाँ—“शुरू से अंत तक प्रकार-सुरक्षा: स्कीमा-प्रथम कार्यप्रवाह” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और TypeScript Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। TypeScript Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“शुरू से अंत तक प्रकार-सुरक्षा: स्कीमा-प्रथम कार्यप्रवाह” में मैं क्या सीखूँगा?

स्कीमा से क्लाइंट तक सत्य का एकल स्रोत बनाए रखें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ TypeScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या TypeScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर TypeScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“शुरू से अंत तक प्रकार-सुरक्षा: स्कीमा-प्रथम कार्यप्रवाह” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस TypeScript Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर TypeScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

GraphQL स्कीमा से TypeScript प्रकार
GraphQL कोड जनरेटर के साथ प्रकारयुक्त रिज़ॉल्वर
Apollo और urql के साथ प्रकारयुक्त GraphQL क्लाइंट
शुरू से अंत तक प्रकार-सुरक्षा: स्कीमा-प्रथम कार्यप्रवाह

← TypeScript Academy पर वापस जाएँ