tRPC TypeScript: पूरी गाइड उदाहरणों के साथ

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

tRPC क्या है और इसकी आवश्यकता क्यों है?

tRPC (TypeScript Remote Procedure Call) एक आधुनिक लाइब्रेरी है जो क्लाइंट और सर्वर के बीच टाइप-सेफ (type-safe) API बनाने के लिए उपयोग होती है। tRPC की सबसे बड़ी खासियत यह है कि इसमें कोड जनरेट करने या टाइप्स को डुप्लिकेट करने की ज़रूरत नहीं होती। आप बस सर्वर पर फंक्शन लिखते हैं, और क्लाइंट उन्हें TypeScript की पूरी सपोर्ट — ऑटो-कम्प्लीशन, टाइप चेकिंग और IntelliSense — के साथ एक्सेस कर सकता है।

REST या GraphQL के विपरीत, जहाँ आपको मैन्युअली स्कीमा, एंडपॉइंट और टाइप्स डिफाइन करने होते हैं, tRPC आपके सर्वर कोड से ऑटोमैटिकली टाइप्स निकाल लेता है। इससे डेवलपमेंट बहुत आसान हो जाती है और गलतियों की संभावना कम हो जाती है।

tRPC के मुख्य लाभ:

  • पूर्ण टाइप-सुरक्षा — टाइप की गलतियाँ कम्पाइल टाइम पर ही पकड़ी जाती हैं, रनटाइम पर नहीं
  • कोई कोड जनरेशन नहीं — जनरेटर चलाने या स्कीमा सिंक करने की ज़रूरत नहीं
  • न्यूनतम बॉयलरप्लेट — REST या GraphQL से कम कोड लिखना होता है
  • ऑटोमैटिक डॉक्यूमेंटेशन — टाइप्स ही डॉक्यूमेंटेशन का काम करते हैं
  • सरलता — यह सामान्य फंक्शन कॉल की तरह काम करता है

tRPC full-stack TypeScript एप्लिकेशन (Next.js, Remix, Express, Fastify) और माइक्रोसर्विस आर्किटेक्चर के लिए एकदम सही है।

tRPC इंस्टॉल कैसे करें

tRPC कई पैकेजों से मिलकर बना है। बेसिक उपयोग के लिए आपको ये चाहिए:

# सर्वर और क्लाइंट पार्ट इंस्टॉल करें
npm install @trpc/server @trpc/client

# React एडॉप्टर इंस्टॉल करें (अगर React उपयोग कर रहे हैं)
npm install @trpc/react-query @tanstack/react-query

# Next.js के लिए एडॉप्टर इंस्टॉल करें
npm install @trpc/next @trpc/react-query @tanstack/react-query

# वैलिडेशन के लिए Zod इंस्टॉल करें (सुझावित)
npm install zod

अगर आप yarn या pnpm उपयोग कर रहे हैं:

yarn add @trpc/server @trpc/client
pnpm add @trpc/server @trpc/client

Python डेवलपर्स के लिए (अगर आप बैकएंड पर Python उपयोग कर रहे हैं): tRPC एक TypeScript लाइब्रेरी है, लेकिन आप इसे trpc-py (एक प्रायोगिक रैपर) के ज़रिए Python के साथ उपयोग कर सकते हैं। हालाँकि, मुख्य इकोसिस्टम TypeScript ही है।

कोड उदाहरण के साथ त्वरित शुरुआत

चलिए एक सरल एप्लिकेशन बनाते हैं: यूज़र्स के साथ काम करने के लिए सर्वर पर प्रोसीजर और क्लाइंट जो उन्हें कॉल करता है।

1. सर्वर (server.ts)

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

// tRPC इंस्टेंस बनाएँ
const t = initTRPC.create();

// यूज़र का टाइप डिफाइन करें
interface User {
  id: number;
  name: string;
  email: string;
}

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

// प्रोसीजर के साथ राउटर बनाएँ
const appRouter = t.router({
  // सभी यूज़र्स प्राप्त करने की प्रोसीजर
  getUsers: t.procedure
    .query(() => {
      return users;
    }),

  // ID से यूज़र प्राप्त करने की प्रोसीजर
  getUserById: t.procedure
    .input(z.number())
    .query(({ input }) => {
      return users.find(user => user.id === input) || null;
    }),

  // नया यूज़र बनाने की प्रोसीजर
  createUser: t.procedure
    .input(z.object({
      name: z.string().min(1),
      email: z.string().email(),
    }))
    .mutation(({ input }) => {
      const newUser: User = {
        id: users.length + 1,
        name: input.name,
        email: input.email,
      };
      users.push(newUser);
      return newUser;
    }),
});

// क्लाइंट के लिए राउटर का टाइप एक्सपोर्ट करें
export type AppRouter = typeof appRouter;

2. क्लाइंट (client.ts)

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';

// क्लाइंट बनाएँ
const client = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trp                    

अनुशंसाएँ