tRPC के साथ एंड-टू-एंड type-safe APIs · पाठ

म्यूटेशन प्रक्रियाएँ विकसित करना

tRPC म्यूटेशन प्रक्रियाओं का उपयोग करके डेटा बनाने, अपडेट करने और हटाने के संचालन के लिए प्रक्रियाएँ बनाएँ।

पाठ 3, कुल 4 में से11 चरण

म्यूटेशन प्रक्रियाएँ विकसित करना, CoddyKit पर tRPC के साथ एंड-टू-एंड type-safe APIs का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह tRPC के साथ एंड-टू-एंड type-safe APIs सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। tRPC के साथ एंड-टू-एंड type-safe APIs पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

tRPC म्यूटेशन क्या हैं?

tRPC म्यूटेशन प्रक्रियाओं में आपका स्वागत है! अब तक आपने संभवतः उपयोगकर्ताओं की सूची या किसी एक उत्पाद जैसी जानकारी प्राप्त करने के लिए क्वेरी का उपयोग किया होगा।

लेकिन यदि आपको डेटा बदलना हो तो? यहीं म्यूटेशन काम आते हैं। म्यूटेशन आपके सर्वर पर डेटा में बदलाव करने के लिए बनाए गए API संचालन हैं।

  • बनाना: नए रिकॉर्ड जोड़ना (जैसे, उपयोगकर्ता बनाना)।
  • अपडेट करना: मौजूदा रिकॉर्ड में बदलाव करना (जैसे, उपयोगकर्ता का ईमेल बदलना)।
  • हटाना: रिकॉर्ड हटाना (जैसे, उपयोगकर्ता हटाना)।

CRUD संचालन में यही 'CUD' होते हैं!

म्यूटेशन बनाम क्वेरी

tRPC में क्वेरी और म्यूटेशन के बीच का अंतर समझना महत्वपूर्ण है:

  • क्वेरी: डेटा प्राप्त करने के लिए उपयोग की जाती हैं। ये सामान्यतः केवल-पठन होती हैं और इनमें साइड इफ़ेक्ट नहीं होने चाहिए (अर्थात, ये सर्वर पर डेटा नहीं बदलतीं)।
  • म्यूटेशन: डेटा बदलने के लिए उपयोग की जाती हैं। इन्हें साइड इफ़ेक्ट रखने और आपके सर्वर की स्थिति में बदलाव करने के लिए बनाया जाता है।

tRPC इस विभाजन को लागू करता है, जिससे आपको अधिक पूर्वानुमेय और मज़बूत API बनाने में सहायता मिलती है। जब भी आपको कुछ बनाना, अपडेट करना या हटाना हो, हमेशा म्यूटेशन का उपयोग करें।

एक सरल म्यूटेशन परिभाषित करना

आइए एक बहुत सरल म्यूटेशन परिभाषित करके शुरू करते हैं। क्वेरी की तरह, म्यूटेशन भी आपके tRPC राउटर के भीतर प्रक्रियाएँ होती हैं।

हम .query() के बजाय .mutation() का उपयोग करते हैं। यह उदाहरण इनपुट के रूप में name लेता है और अभिवादन वाली स्ट्रिंग लौटाता है।

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

const t = initTRPC.create();

const appRouter = t.router({
  sayHello: t.procedure
    .input(z.object({ name: z.string() }))
    .mutation(({ input }) => {
      // In a real app, this might save 'name' to a log
      return `Hello, ${input.name}!`;
    }),
});

export type AppRouter = typeof appRouter;
// This defines a valid tRPC router with one mutation.

डेटा बनाना: 'Create' म्यूटेशन

म्यूटेशन का एक सामान्य उपयोग नए डेटा को बनाना है। आइए एक createUser म्यूटेशन बनाएँ, जो उपयोगकर्ता का नाम और ईमेल स्वीकार करे।

अपेक्षित इनपुट संरचना परिभाषित करने के लिए हम zod (एक स्कीमा मान्यता लाइब्रेरी) का उपयोग करेंगे। इससे प्रकार-सुरक्षा सुनिश्चित होती है और आने वाले डेटा की स्वतः मान्यता हो जाती है।

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

const t = initTRPC.create();

interface User {
  id: string;
  name: string;
  email: string;
}
const users: User[] = []; // Our 'database'

const appRouter = t.router({
  createUser: t.procedure
    .input(z.object({
      name: z.string().min(1),
      email: z.string().email(),
    }))
    .mutation(({ input }) => {
      const newUser: User = {
        id: `user-${users.length + 1}`,
        name: input.name,
        email: input.email,
      };
      users.push(newUser); // Add to our fake database
      return newUser; // Return the new user object
    }),
});

export type AppRouter = typeof appRouter;
// This router defines how to create a user.

डेटा अपडेट करना: 'Update' म्यूटेशन

अब मौजूदा डेटा को अपडेट करते हैं। updateUser म्यूटेशन को अपडेट किए जाने वाले उपयोगकर्ता का id और बदले जाने वाले फ़ील्ड चाहिए होंगे।

ध्यान दें कि यदि अपडेट के दौरान कोई फ़ील्ड हमेशा उपलब्ध न हो, तो हम अपने Zod स्कीमा में उसे .optional() बना सकते हैं।

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

const t = initTRPC.create();

interface User {
  id: string;
  name: string;
  email: string;
}
const users: User[] = [
  { id: 'user-1', name: 'Alice', email: 'alice@example.com' },
];

const appRouter = t.router({
  updateUser: t.procedure
    .input(z.object({
      id: z.string(),
      name: z.string().min(1).optional(),
      email: z.string().email().optional(),
    }))
    .mutation(({ input }) => {
      const userIndex = users.findIndex(u => u.id === input.id);
      if (userIndex === -1) {
        throw new Error('User not found');
      }
      // Merge existing data with new input
      users[userIndex] = { ...users[userIndex], ...input };
      return users[userIndex]; // Return the updated user
    }),
});

export type AppRouter = typeof appRouter;
// This router defines how to update a user.

डेटा हटाना: 'Delete' म्यूटेशन

अंत में, डेटा हटाने के लिए एक म्यूटेशन बनाएँ। deleteUser म्यूटेशन को आमतौर पर हटाए जाने वाले रिकॉर्ड का केवल id चाहिए होता है।

लौटाए जाने वाले मान के रूप में आप सफलता का सरल संदेश या हटाए गए आइटम की ID भेज सकते हैं। यहाँ हम सफलता बताने वाला बूलियन लौटाएँगे।

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

const t = initTRPC.create();

interface User {
  id: string;
  name: string;
  email: string;
}
const users: User[] = [
  { id: 'user-1', name: 'Alice', email: 'alice@example.com' },
  { id: 'user-2', name: 'Bob', email: 'bob@example.com' },
];

const appRouter = t.router({
  deleteUser: t.procedure
    .input(z.object({ id: z.string() }))
    .mutation(({ input }) => {
      const initialLength = users.length;
      const userIndex = users.findIndex(u => u.id === input.id);
      if (userIndex !== -1) {
        users.splice(userIndex, 1); // Remove from array
      }
      // Return true if an item was removed
      return { success: users.length < initialLength };
    }),
});

export type AppRouter = typeof appRouter;
// This router defines how to delete a user.

क्लाइंट-साइड म्यूटेशन कॉल

अब जब आपने सर्वर पर अपने म्यूटेशन परिभाषित कर लिए हैं, तो उन्हें अपने फ्रंटएंड अनुप्रयोग से कैसे कॉल करेंगे?

tRPC क्लाइंट का उपयोग करके आप म्यूटेशन को उसके नाम से सीधे एक्सेस करते हैं और अपने इनपुट डेटा के साथ .mutate() विधि को कॉल करते हैं।

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';

// A simplified AppRouter type for this client-side example.
// In a real app, you'd import 'AppRouter' from your shared types.
interface User { id: string; name: string; email: string; }
type AppRouter = {
  sayHello: (input: { name: string }) => Promise<string>;
  createUser: (input: { name: string; email: string }) => Promise<User>;
  deleteUser: (input: { id: string }) => Promise<{ success: boolean }>;
};

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc', // Your tRPC server URL
    }),
  ],
});

async function runMutationCalls() {
  console.log('1. Calling sayHello...');
  const helloRes = await trpc.sayHello.mutate({ name: 'Coddy' });
  console.log(`Result: ${helloRes}`);

  console.log('2. Calling createUser...');
  const newUser = await trpc.createUser.mutate({
    name: 'Eve',
    email: 'eve@example.com',
  });
  console.log('Created:', newUser);

  console.log('3. Calling deleteUser...');
  const deleteRes = await trpc.deleteUser.mutate({ id: newUser.id });
  console.log('Deleted:', deleteRes.success);
}

runMutationCalls();
// This script simulates client-side mutation calls.

परिणामों और त्रुटियों का प्रबंधन

जब आप क्लाइंट से कोई म्यूटेशन कॉल करते हैं, तो वह एक Promise लौटाता है। किसी भी असमकालिक संचालन की तरह, परिणाम की प्रतीक्षा करने के लिए आप await का उपयोग कर सकते हैं।

त्रुटि प्रबंधन के लिए, अपने .mutate() कॉल के चारों ओर मानक JavaScript try...catch ब्लॉक का उपयोग कर सकते हैं। tRPC आपके बैकएंड की त्रुटियों को क्लाइंट तक स्वतः पहुँचा देगा।

try {
  const result = await trpc.createUser.mutate({ ... });
  // Handle success
} catch (error) {
  // Handle error
  console.error('Mutation failed:', error.message);
}

इससे त्रुटि प्रबंधन सरल और प्रकार-सुरक्षित हो जाता है।

म्यूटेशन का उपयोग कब करें

अपने सर्वर पर डेटा बदलने वाले किसी भी संचालन के लिए म्यूटेशन का उपयोग करना याद रखें। इसमें शामिल हैं:

  • फ़ॉर्म सबमिट करना (जैसे, उपयोगकर्ता पंजीकरण या टिप्पणी पोस्ट करना)।
  • किसी सेटिंग को टॉगल करना (जैसे, डार्क मोड की प्राथमिकता)।
  • प्रशासनिक कार्रवाइयाँ करना (जैसे, किसी उपयोगकर्ता पर प्रतिबंध लगाना)।
  • फ़ाइलें अपलोड करना (हालाँकि इसमें विशेष प्रबंधन की आवश्यकता हो सकती है)।

इन कार्रवाइयों के लिए लगातार म्यूटेशन का उपयोग करने से स्पष्टता और प्रकार-सुरक्षा बनी रहती है तथा डेटा में बदलाव के लिए tRPC की शक्तिशाली सुविधाओं का लाभ मिलता है।

अपने म्यूटेशन ज्ञान की जाँच करें

आपने tRPC म्यूटेशन प्रक्रियाओं को परिभाषित करना और उनका उपयोग करना सीख लिया है। अब एक छोटी जाँच का समय है!

पुनरावलोकन: म्यूटेशन प्रक्रियाएँ

बहुत अच्छा! इस पाठ में आपने tRPC म्यूटेशन प्रक्रियाओं में निपुणता प्राप्त की:

  • आपने सीखा कि म्यूटेशन डेटा बदलने वाले संचालन (Create, Update, Delete) के लिए होते हैं।
  • आपने देखा कि Zod के माध्यम से इनपुट मान्यता के साथ t.procedure.mutation() का उपयोग करके म्यूटेशन कैसे परिभाषित किए जाते हैं।
  • आपने सर्वर पर डेटा बनाने, अपडेट करने और हटाने के उदाहरण बनाए।
  • आप समझ गए कि क्लाइंट से इन म्यूटेशन को कैसे कॉल करना है और उनके परिणामों का प्रबंधन कैसे करना है।

tRPC के साथ परस्पर संवादात्मक और डेटा-आधारित अनुप्रयोग बनाने में म्यूटेशन एक मुख्य भाग हैं। इसके बाद हम Zod के साथ इनपुट मान्यता का गहराई से अध्ययन करेंगे!

शुरुआत निःशुल्क

एआई शिक्षक के साथ tRPC के साथ एंड-टू-एंड type-safe APIs सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
10
पाठ
40

अक्सर पूछे जाने वाले प्रश्न

क्या “म्यूटेशन प्रक्रियाएँ विकसित करना” पाठ निःशुल्क है?

हाँ — tRPC के साथ एंड-टू-एंड type-safe APIs अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “म्यूटेशन प्रक्रियाएँ विकसित करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। tRPC के साथ एंड-टू-एंड type-safe APIs पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“म्यूटेशन प्रक्रियाएँ विकसित करना” में मैं क्या सीखूँगा?

tRPC म्यूटेशन प्रक्रियाओं का उपयोग करके डेटा बनाने, अपडेट करने और हटाने के संचालन के लिए प्रक्रियाएँ बनाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ tRPC के साथ एंड-टू-एंड type-safe APIs का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या tRPC के साथ एंड-टू-एंड type-safe APIs शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर tRPC के साथ एंड-टू-एंड type-safe APIs शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“म्यूटेशन प्रक्रियाएँ विकसित करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस tRPC के साथ एंड-टू-एंड type-safe APIs पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर tRPC के साथ एंड-टू-एंड type-safe APIs पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. tRPC राउटर के साथ संरचना बनाना
  2. क्वेरी प्रक्रियाएँ लागू करना
  3. म्यूटेशन प्रक्रियाएँ विकसित करना
  4. राउटर का विलय और नेस्टिंग
← tRPC के साथ एंड-टू-एंड type-safe APIs पर वापस जाएँ