TypeScript के साथ GraphQL API: शुरुआती लोगों के लिए चरण-दर-चरण ट्यूटोरियल

GraphQL और TypeScript का परिचय

GraphQL API के लिए एक क्वेरी भाषा है, जो क्लाइंट को केवल वही डेटा मांगने की अनुमति देती है जिसकी उन्हें वास्तव में आवश्यकता होती है। TypeScript के साथ, जो JavaScript में स्थिर टाइपिंग जोड़ता है, आपको विश्वसनीय और स्केलेबल API बनाने के लिए एक शक्तिशाली उपकरण मिलता है। इस ट्यूटोरियल में हम TypeScript पर चरण दर चरण एक सरल GraphQL API बनाएंगे। आप सीखेंगे कि प्रोजेक्ट कैसे सेट करें, स्कीमा कैसे परिभाषित करें, रिज़ॉल्वर कैसे लिखें और क्वेरी कैसे करें।

यह सामग्री शुरुआती डेवलपर्स के लिए है जो JavaScript की मूल बातों से परिचित हैं और आधुनिक तकनीकों में महारत हासिल करना चाहते हैं। लेख के अंत तक, आप स्वयं एक बुनियादी GraphQL सर्वर तैनात करने में सक्षम होंगे।

चरण 1: प्रोजेक्ट सेटअप

कोड लिखने से पहले, प्रोजेक्ट को इनिशियलाइज़ करना और निर्भरताएँ स्थापित करना आवश्यक है। हम Apollo Server का उपयोग करेंगे - जो Node.js में GraphQL के साथ काम करने के लिए सबसे लोकप्रिय लाइब्रेरी में से एक है।

npm इनिशियलाइज़ेशन

एक नई निर्देशिका बनाएँ और इनिशियलाइज़ेशन करें:

mkdir graphql-typescript-tutorial\ncd graphql-typescript-tutorial\nnpm init -y

निर्भरताएँ स्थापित करना

आवश्यक पैकेज स्थापित करें:

npm install apollo-server graphql\nnpm install typescript ts-node @types/node --save-dev

\n
• apollo-server — GraphQL क्वेरी को संसाधित करने के लिए सर्वर।
\n
• graphql — GraphQL भाषा का मूल।
\n
• typescript और ts-node — TypeScript को संकलित और चलाने के लिए।
\n

TypeScript कॉन्फ़िगरेशन

प्रोजेक्ट की रूट में tsconfig.json फ़ाइल बनाएँ:

{\n  "compilerOptions": {\n    "target": "ES2020",\n    "module": "commonjs",\n    "strict": true,\n    "esModuleInterop": true,\n    "outDir": "./dist",\n    "rootDir": "./src"\n  },\n  "include": ["src/**/*"],\n  "exclude": ["node_modules"]\n}

src फ़ोल्डर और index.ts फ़ाइल बनाएँ - इसमें सर्वर का मुख्य कोड होगा।

चरण 2: स्कीमा और प्रकार परिभाषित करना

GraphQL स्कीमा बताती है कि कौन सा डेटा उपलब्ध है और इसे कैसे मांगा जा सकता है। TypeScript में, हम प्रकारों को परिभाषित करने के लिए gql सिंटैक्स वाली स्ट्रिंग का उपयोग करेंगे।

बुनियादी स्कीमा

src/index.ts खोलें और निम्नलिखित कोड जोड़ें:

import { ApolloServer, gql } from 'apollo-server';\n\nconst typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n`;

यहाँ हमने id, title और author फ़ील्ड के साथ Book प्रकार परिभाषित किया है। Query में दो क्वेरी हैं: सभी पुस्तकें प्राप्त करना और ID द्वारा एक पुस्तक प्राप्त करना।

मॉक डेटा

परीक्षण के लिए पुस्तकों की एक सरणी जोड़ें:

const books = [\n  { id: '1', title: 'वॉर एंड पीस', author: 'लियो टॉल्स्टॉय' },\n  { id: '2', title: 'क्राइम एंड पनिशमेंट', author: 'फ्योडोर दोस्तोयेव्स्की' },\n];

चरण 3: रिज़ॉल्वर लिखना

रिज़ॉल्वर ऐसे फ़ंक्शन हैं जो स्कीमा के प्रत्येक फ़ील्ड के लिए डेटा लौटाते हैं। वे स्कीमा को वास्तविक डेटा से जोड़ते हैं।

रिज़ॉल्वर का कार्यान्वयन

resolvers ऑब्जेक्ट जोड़ें:

const resolvers = {\n  Query: {\n    books: () => books,\n    book: (_: any, args: { id: string }) => {\n      return books.find(book => book.id === args.id);\n    },\n  },\n};

पहला तर्क _ पैरेंट ऑब्जेक्ट है (इस मामले में उपयोग नहीं किया गया)। दूसरा तर्क args में क्वेरी पैरामीटर होते हैं, उदाहरण के लिए, id।

सर्वर असेंबली

अब सर्वर का एक इंस्टेंस बनाएँ और इसे चलाएँ:

const server = new ApolloServer({ typeDefs, resolvers });\n\nserver.listen().then(({ url }) => {\n  console.log(`🚀 सर्वर ${url} पर चल रहा है`);\n});