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

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

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

TypeScript के साथ GraphQL को क्यों चुनना चाहिए? पहला, आपको संकलन चरण में ऑटो-कम्प्लीशन और टाइप चेकिंग मिलती है। दूसरा, GraphQL आपको कई अनुरोधों को एक में संयोजित करने की अनुमति देता है, जिससे नेटवर्क अनुरोधों की संख्या कम हो जाती है। तीसरा, TypeScript जटिल ग्राफ़ संरचनाओं के डेटा का वर्णन करने के लिए आदर्श है।

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

शुरू करने के लिए, हम एक नया प्रोजेक्ट बनाएंगे और आवश्यक पैकेज स्थापित करेंगे। हम Apollo Server का उपयोग करेंगे - जो GraphQL के लिए सबसे लोकप्रिय सर्वर है, और TypeScript के साथ सुविधाजनक एकीकरण के लिए TypeGraphQL का उपयोग करेंगे।

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -ynpm install apollo-server graphql reflect-metadata class-validatornpm install typescript type-graphql @types/node --save-devnpx tsc --init

स्थापना के बाद, हम tsconfig.json कॉन्फ़िगर करेंगे। सुनिश्चित करें कि निम्नलिखित विकल्प शामिल हैं:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "lib": ["ES2020"],    "experimentalDecorators": true,    "emitDecoratorMetadata": true,    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true  }}

फ़ोल्डर संरचना बनाएँ:

src/  ├── index.ts  ├── resolvers/  │   └── user.resolver.ts  ├── schemas/  │   └── user.schema.ts  └── data/      └── users.ts

स्कीमा और डेटा प्रकार बनाना

TypeGraphQL में, डेटा प्रकारों को डेकोरेटर का उपयोग करके वर्णित किया जाता है। हम एक उपयोगकर्ता मॉडल और म्यूटेशन के लिए इनपुट डेटा प्रकार बनाएंगे।

// src/schemas/user.schema.tsimport { ObjectType, Field, ID, InputType } from "type-graphql";

@ObjectType()export class User {  @Field(() => ID)  id!: number;

  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

@InputType()export class CreateUserInput {  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

वापसी प्रकारों का वर्णन करने के लिए @ObjectType() और इनपुट पैरामीटर के लिए @InputType() के उपयोग पर ध्यान दें। यह TypeGraphQL को स्वचालित रूप से GraphQL स्कीमा उत्पन्न करने की अनुमति देता है।

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

रिज़ॉल्वर ऐसे फ़ंक्शन हैं जो अनुरोधों को संसाधित करते हैं और डेटा लौटाते हैं। हम उपयोगकर्ताओं को संग्रहीत करने के लिए एक सरल in-memory ऐरे बनाएंगे।

// src/data/users.tsimport { User } from "../schemas/user.schema";

export const users: User[] = [  { id: 1, name: "इवान पेत्रोव", email: "ivan@example.com", age: 28 },  { id: 2, name: "मारिया सिदोरोवा", email: "maria@example.com", age: 32 },];

अब हम क्वेरी और म्यूटेशन के लिए रिज़ॉल्वर लिखेंगे:

// src/resolvers/user.resolver.tsimport { Resolver, Query, Mutation, Arg, Int } from "type-graphql";import { User, CreateUserInput } from "../schemas/user.schema";import { users } from "../data/users";

@Resolver()export class UserResolver {  @Query(() => [User])  async getAllUsers(): Promise<User[]> {    return users;  }

  @Query(() => User, { nullable: true })  async getUserById(    @Arg("id", () => Int) id: number  ): Promise<User | undefined> {    return users.find(user => user.id === id);  }

  @Mutation(() => User)  async createUser(    @Arg("input") input: CreateUserInput  ): Promise<User> {    const newUser: User =