क्वेरी, म्यूटेशन और सब्सक्रिप्शन
पूर्ण ऑटोकम्प्लीट और त्रुटि प्रकारों के साथ React कंपोनेंट से tRPC की टाइपयुक्त क्वेरी और म्यूटेशन उपयोग करें
क्वेरी, म्यूटेशन और सब्सक्रिप्शन, CoddyKit पर React Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह React Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
क्वेरी प्रक्रिया परिभाषित करना
publicProcedure के साथ .input(zodSchema).query(async ({ input, ctx }) => ...) जोड़ें। हैंडलर को सत्यापित इनपुट और अनुरोध कॉन्टेक्स्ट प्राप्त होता है। कोई भी क्रमबद्ध किया जा सकने वाला मान लौटाएँ: ऑब्जेक्ट, ऐरे या आदिम मान।
रिटर्न प्रकार का स्वतः अनुमान लगाया जाता है और वह क्लाइंट पर संबंधित useQuery हुक का डेटा प्रकार बन जाता है।
React से क्वेरी कॉल करना
trpc.post.getById.useQuery({ id: '1' }) पोस्ट राउटर में getById प्रक्रिया को कॉल करता है। यह हुक परिचित React Query परिणाम ऑब्जेक्ट लौटाता है: { data, isLoading, isError, refetch }।
इनपुट ऑब्जेक्ट का प्रकार स्थिर रूप से जाँचा जाता है: जब स्कीमा स्ट्रिंग की अपेक्षा करती है, तब { id: 123 } पास करने पर डेवलपमेंट समय में पकड़ी जाने वाली TypeScript त्रुटि मिलती है।
म्यूटेशन प्रक्रिया परिभाषित करना
सर्वर-साइड डेटा लिखने के कार्यों के लिए .input(zodSchema).mutation(async ({ input, ctx }) => ...) का उपयोग करें, जैसे डेटा बनाना, अपडेट करना या हटाना। म्यूटेशन को स्पष्ट रूप से कॉल किया जाता है; वे माउंट होने पर अपने-आप नहीं चलते।
म्यूटेशन हैंडलर को ctx के माध्यम से पूरे अनुरोध कॉन्टेक्स्ट का, जिसमें NextAuth का सेशन भी शामिल है, उपयोग मिलता है।
React से म्यूटेशन कॉल करना
const { mutate, isLoading, error } = trpc.post.create.useMutation()। म्यूटेशन शुरू करने के लिए mutate({ title: 'New', content: '...' }) कॉल करें। React Query के useMutation की तरह यह माउंट होने पर नहीं चलता।
म्यूटेशन के बाद किए जाने वाले प्रभावों के लिए useMutation विकल्पों में onSuccess और onError कॉलबैक पास करें।
म्यूटेशन के बाद कैश अमान्य करना
सफल म्यूटेशन के बाद क्वेरी डेटा को ताज़ा करने के लिए tRPC यूटिलिटी हुक का उपयोग करें: const utils = trpc.useUtils()। onSuccess में utils.post.getAll.invalidate() कॉल करके पोस्ट सूची को फिर से लोड करें।
यह React Query के queryClient.invalidateQueries() के समतुल्य tRPC तरीका है और उसी पुराने डेटा को फिर से लोड करने वाले पैटर्न का पालन करता है।
Zod से इनपुट सत्यापन
tRPC डिफ़ॉल्ट रूप से इनपुट सत्यापन के लिए Zod का उपयोग करता है। Zod स्कीमा सर्वर पर रनटाइम में चलती है और अमान्य इनपुट को आपके हैंडलर तक पहुँचने से पहले अस्वीकार कर देती है। यही स्कीमा क्लाइंट के लिए TypeScript प्रकार भी उपलब्ध कराती है।
इस दोहरी भूमिका (रनटाइम सत्यापन और TypeScript प्रकार) से दोहराव समाप्त होता है: आप Zod में अनुबंध एक बार परिभाषित करते हैं और दोनों सुरक्षा गारंटियाँ स्वतः प्राप्त करते हैं।
httpBatchLink से अनुरोध बैच करना
डिफ़ॉल्ट रूप से tRPC httpBatchLink का उपयोग करता है, जो कई समवर्ती tRPC अनुरोधों को एक HTTP अनुरोध में बैच करता है। एक ही कंपोनेंट के रेंडर चक्र में की गई कई useQuery कॉल साथ भेजी और साथ ही हल की जाती हैं।
किसी पृष्ठ पर कई डेटा आवश्यकताओं के लिए अलग-अलग HTTP अनुरोध करने की तुलना में इससे नेटवर्क का अतिरिक्त भार काफ़ी कम हो जाता है।
tRPC सब्सक्रिप्शन का परिचय
एक सब्सक्रिप्शन प्रक्रिया परिभाषित करें: publicProcedure.subscription(async function*() { while (true) { yield await nextEvent(); } })। सब्सक्रिप्शन async जनरेटर का उपयोग करते हैं और इनके लिए WebSocket ट्रांसपोर्ट आवश्यक होता है।
रीयल-टाइम सुविधाओं के लिए सब्सक्रिप्शन आदर्श हैं, जैसे लाइव सूचनाएँ, सहयोगात्मक संपादन कर्सर या स्ट्रीम होती AI प्रतिक्रियाएँ।
WebSocket ट्रांसपोर्ट सेटअप
splitLink का उपयोग करके httpBatchLink को httpBatchLink और wsLink के संयोजन से बदलें: सब्सक्रिप्शन को wsLink पर और क्वेरी/म्यूटेशन को httpBatchLink पर भेजें। createWSClient({ url: 'ws://localhost:3000' }) से WebSocket क्लाइंट बनाएँ।
इस हाइब्रिड ट्रांसपोर्ट का अर्थ है कि अधिकांश अनुरोध कुशल HTTP बैचिंग का उपयोग करते हैं, जबकि सब्सक्रिप्शन स्थायी WebSocket कनेक्शन का उपयोग करते हैं।
React से सब्सक्रिप्शन कॉल करना
trpc.notifications.onNew.useSubscription(undefined, { onData: (notification) => addToList(notification), onError: console.error }) प्रक्रिया को सब्सक्राइब करता है। onData कॉलबैक हर बार जनरेट किए गए मान के लिए कॉल किया जाता है।
WebSocket डिस्कनेक्ट होकर फिर से कनेक्ट होने पर सब्सक्रिप्शन अपने-आप दोबारा स्थापित हो जाता है।
क्वेरी, म्यूटेशन और सब्सक्रिप्शन को संयोजित करना
रीयल-टाइम सूची वाला पृष्ठ शुरुआती सूची लोड करने के लिए क्वेरी, कोई आइटम जोड़ने के लिए म्यूटेशन और अन्य उपयोगकर्ताओं से लाइव जोड़े गए आइटम प्राप्त करने के लिए सब्सक्रिप्शन का उपयोग कर सकता है। ये तीनों एक ही AppRouter के अनुसार टाइप किए जाते हैं और स्वाभाविक रूप से एक साथ संयोजित होते हैं।
कैश अमान्य करने की रणनीति इस बात पर निर्भर करती है कि आप पूरा डेटा फिर से लोड करना पसंद करते हैं (म्यूटेशन के बाद invalidate) या कैश अपडेट करना (utils.post.getAll.setData)।
tRPC म्यूटेशन और कैश अमान्यकरण
म्यूटेशन सफल होने के बाद क्वेरी को फिर से लोड करने के लिए कौन-सी tRPC यूटिलिटी विधि उपयोग की जाती है?
पाठ का पुनरावलोकन
.query() से क्वेरी और .mutation() से म्यूटेशन परिभाषित करें; दोनों का सत्यापन Zod स्कीमा द्वारा होता है। क्लाइंट पर trpc.router.procedure.useQuery() और useMutation() का उपयोग करें। म्यूटेशन के बाद utils.procedure.invalidate() से क्वेरी अमान्य करें। सब्सक्रिप्शन async जनरेटर का उपयोग करते हैं और WebSocket ट्रांसपोर्ट के लिए wsLink आवश्यक है।
httpBatchLink डिफ़ॉल्ट रूप से समवर्ती क्वेरी को एक HTTP अनुरोध में बैच करता है।
एआई शिक्षक के साथ React सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 88
- पाठ
- 324
अक्सर पूछे जाने वाले प्रश्न
क्या “क्वेरी, म्यूटेशन और सब्सक्रिप्शन” पाठ निःशुल्क है?
हाँ—“क्वेरी, म्यूटेशन और सब्सक्रिप्शन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और React Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। React Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“क्वेरी, म्यूटेशन और सब्सक्रिप्शन” में मैं क्या सीखूँगा?
पूर्ण ऑटोकम्प्लीट और त्रुटि प्रकारों के साथ React कंपोनेंट से tRPC की टाइपयुक्त क्वेरी और म्यूटेशन उपयोग करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ React Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या React Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर React Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।
“क्वेरी, म्यूटेशन और सब्सक्रिप्शन” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस React Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर React Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- tRPC किस समस्या का समाधान करता है
- React और Next.js के साथ tRPC सेट अप करना
- क्वेरी, म्यूटेशन और सब्सक्रिप्शन
- tRPC को React Query और प्रमाणीकरण के साथ जोड़ना