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

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

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

हम कवर करेंगे: प्रोजेक्ट सेटअप, स्कीमा और टाइप्स की परिभाषा, रिज़ॉल्वर का कार्यान्वयन, डेटा बदलने के लिए म्यूटेशन, और डेटाबेस के साथ एकीकरण (सरलता के लिए in-memory)। लेख के अंत तक, आप अपना खुद का GraphQL सर्वर चला सकेंगे।

1. प्रोजेक्ट तैयार करना और डिपेंडेंसी इंस्टॉल करना

सबसे पहले, एक नया Node.js प्रोजेक्ट बनाएं और आवश्यक पैकेज इंस्टॉल करें।

mkdir graphql-typescript-tutorialcd graphql-typescript-tutorialnpm init -ynpm install apollo-server graphqlnpm install -D typescript @types/node ts-node nodemon

tsconfig.json फ़ाइल बनाएं:

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

प्रोजेक्ट की संरचना इस प्रकार होगी:

• src/index.ts — एंट्री पॉइंट
• src/schema.ts — GraphQL स्कीमा
• src/resolvers.ts — रिज़ॉल्वर
• src/types.ts — TypeScript टाइप्स

2. GraphQL टाइप्स और स्कीमा को परिभाषित करना

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

src/types.ts बनाएं:

export interface User {  id: number;  name: string;  email: string;}

export interface Post {  id: number;  title: string;  content: string;  authorId: number;}

export interface CreateUserInput {  name: string;  email: string;}

export interface CreatePostInput {  title: string;  content: string;  authorId: number;}

अब GraphQL टाइप्स की परिभाषा के साथ src/schema.ts बनाएं:

import { gql } from 'apollo-server';

export const typeDefs = gql`  type User {    id: ID!    name: String!    email: String!    posts: [Post!]!  }

  type Post {    id: ID!    title: String!    content: String!    author: User!  }

  input CreateUserInput {    name: String!    email: String!  }

  input CreatePostInput {    title: String!    content: String!    authorId: ID!  }

  type Query {    users: [User!]!    user(id: ID!): User    posts: [Post!]!    post(id: ID!): Post  }

  type Mutation {    createUser(input: CreateUserInput!): User!    createPost(input: CreatePostInput!): Post!  }`;

ध्यान दें: हम म्यूटेशन के लिए input टाइप का उपयोग कर रहे हैं — यह GraphQL में एक मानक अभ्यास है।

3. TypeScript के साथ रिज़ॉल्वर का कार्यान्वयन

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

import { User, Post, CreateUserInput, CreatePostInput } from './types';

// In-memory डेटाबेसlet users: User[] = [  { id: 1, name: 'Alice', email: 'alice@example.com' },  { id: 2, name: 'Bob', email: 'bob@example.com' },];

let posts: Post[] = [  { id: 1, title: 'GraphQL Basics', content: '...', authorId: 1 },  { id: 2, title: 'TypeScript Guide', content: '...', authorId: 2 },];

let nextUserId = 3;let nextPostId = 3;

export const resolvers = {  Query: {    users: (): User[] => users,    user: (_: unknown, args: { id: string }): User | undefined =>      users.find(u => u.id === Number(args.id)),    posts: (): Post[] => posts,    post: (_: unknown,
```