TypeScript के साथ GraphQL API: व्यावहारिक चरण-दर-चरण ट्यूटोरियल

TypeScript के साथ GraphQL API का परिचय

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

यह मार्गदर्शिका उन डेवलपर्स के लिए उपयुक्त है जो JavaScript और Node.js की मूल बातों से परिचित हैं। हम निर्भरताएँ स्थापित करने से लेकर तैयार API के परीक्षण तक का सफर तय करेंगे।

1. प्रोजेक्ट सेटअप और निर्भरताएँ स्थापित करना

सबसे पहले एक नया प्रोजेक्ट बनाएँ और आवश्यक पैकेज स्थापित करें। टर्मिनल खोलें और निम्नलिखित चलाएँ:

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -y

TypeScript, Apollo Server और GraphQL स्थापित करें:

npm install apollo-server graphqlnpm install -D typescript @types/node ts-node nodemon

TypeScript कॉन्फ़िगरेशन के लिए tsconfig.json फ़ाइल बनाएँ:

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

src फ़ोल्डर और src/index.ts फ़ाइल बनाएँ — यह हमारे एप्लिकेशन का प्रवेश बिंदु होगा।

2. GraphQL स्कीमा और TypeScript प्रकार बनाना

GraphQL में, स्कीमा डेटा प्रकारों और क्लाइंट के लिए उपलब्ध संचालन को परिभाषित करती है। पुस्तकों के प्रबंधन के लिए एक सरल स्कीमा बनाएँ।

फ़ाइल src/schema.ts:

import { gql } from 'apollo-server';

export const typeDefs = gql`  type Book {    id: ID!    title: String!    author: String!    publishedYear: Int  }

  type Query {    books: [Book]    book(id: ID!): Book  }

  type Mutation {    addBook(title: String!, author: String!, publishedYear: Int): Book    deleteBook(id: ID!): Book  }`;

अब अपने डेटा के लिए TypeScript इंटरफ़ेस परिभाषित करें। src/types.ts बनाएँ:

export interface Book {  id: string;  title: string;  author: string;  publishedYear?: number;}

ध्यान दें: TypeScript इंटरफ़ेस आंतरिक तर्क के लिए आवश्यक हैं, जबकि GraphQL प्रकार क्लाइंट-सर्वर इंटरैक्शन के लिए हैं। इन्हें संगत होना चाहिए।

3. रिज़ॉल्वर और सर्वर का कार्यान्वयन

रिज़ॉल्वर ऐसे फ़ंक्शन हैं जो स्कीमा के प्रत्येक फ़ील्ड के लिए डेटा लौटाते हैं। डेटाबेस सिमुलेशन के साथ src/resolvers.ts फ़ाइल बनाएँ:

import { Book } from './types';

let books: Book[] = [  { id: '1', title: 'युद्ध और शांति', author: 'लियो टॉल्स्टॉय', publishedYear: 1869 },  { id: '2', title: 'अपराध और दंड', author: 'फ्योदोर दोस्तोयेव्स्की', publishedYear: 1866 },];

export const resolvers = {  Query: {    books: (): Book[] => books,    book: (_: any, args: { id: string }): Book | undefined => {      return books.find(book => book.id === args.id);    },  },  Mutation: {    addBook: (_: any, args: { title: string; author: string; publishedYear?: number }): Book => {      const newBook: Book = {        id: String(books.length + 1),        title: args.title,        author: args.author,        publishedYear: args.publishedYear,      };      books.push(newBook);      return newBook;    },    deleteBook: (_: any, args: { id: string }): Book | null => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    },  },};

अब मुख्य फ़ाइल src/index.ts में सब कुछ जोड़ें:

import { ApolloServer } from 'apollo-server';import { typeDefs } from './schema';import { r