React Query और Zustand के साथ आशावादी पैटर्न

React Query का useMutation हुक आशावादी संशोधनों के लिए तीन जीवनचक्र कॉलबैक के माध्यम से अंतर्निहित ढाँचा देता है: onMutate (परिवर्तन से पहले चलता है और एक संदर्भ वस्तु लौटाता है), onError (विफलता पर चलता है और संदर्भ प्राप्त करता है) और onSettled (सफलता या विफलता, दोनों पर चलता है)। यह संरचना विशेष रूप से आशावादी तरीकों के लिए बनाई गई है।

onMutate में तीन चरण पूरे करें: पहले, प्रभावित डेटा के लिए प्रगति में चल रही सभी क्वेरी रद्द करें (await queryClient.cancelQueries({ queryKey })), फिर वर्तमान कैश की प्रतिलिपि सुरक्षित रखें (queryClient.getQueryData(queryKey)) और अंत में कैश में आशावादी संशोधन लागू करें (queryClient.setQueryData(queryKey, updater))। इस प्रतिलिपि को संदर्भ के रूप में लौटाएँ।

onError कॉलबैक को त्रुटि, परिवर्तन के चर और onMutate से लौटाया गया संदर्भ प्राप्त होता है। पुनर्स्थापन के लिए संदर्भ का उपयोग करें: queryClient.setQueryData(queryKey, context.previousData)। संदर्भ, onMutate में ली गई स्थिति-प्रतिलिपि और onError में किए गए पुनर्स्थापन के बीच की कड़ी है।

onSettled कॉलबैक सफलता या विफलता की परवाह किए बिना चलता है। क्वेरी को फिर से प्राप्त करके सर्वर स्थिति के साथ समन्वय करने के लिए इसका उपयोग करें: queryClient.invalidateQueries({ queryKey })। इससे यह सुनिश्चित होता है कि किसी भी परिवर्तन के बाद — चाहे वह सफल रहा हो (सर्वर ने डेटा में बदलाव किया हो सकता है) या विफल हुआ हो (पुनर्स्थापन पूरा हो चुका हो) — आपकी स्थिति अंततः सर्वर की वास्तविक स्थिति के अनुरूप हो जाए।

एक व्यावहारिक उदाहरण: किसी कार्य-सूची तत्व की पूर्ण स्थिति को बदलना। onMutate में कार्यों की सूची की प्रतिलिपि सुरक्षित रखें, फिर कैश में उस विशेष कार्य-सूची तत्व को संशोधित करें। onError में संदर्भ से प्रतिलिपि वापस लाएँ। onSettled में कार्यों की क्वेरी को अमान्य करके उसे फिर से प्राप्त करें। उपयोगकर्ता को स्विच तुरंत बदलता हुआ दिखाई देता है; सर्वर पृष्ठभूमि में समन्वय करता है।

Zustand भंडार में आशावादी संशोधन सरल होते हैं: updateItem(id, changes) नाम की एक कार्रवाई बनाएँ, जो पहले भंडार में तत्व को तुरंत संशोधित करे और फिर API को कॉल करे। यदि API विफल हो जाए, तो दूसरी कार्रवाई revertItem(id, previousState) चलाएँ। Zustand की समकालिक स्थिति-प्रक्रियाएँ आशावादी चरण को तुरंत पूरा कर देती हैं।

Zustand की गहराई से अंतर्निहित स्थिति को आशावादी रूप से संशोधित करते समय साफ़-सुथरे बदलावों के लिए Immer के produce का उपयोग करें: set(produce(state => { state.items[id] = { ...state.items[id], ...changes } }))। Immer परिवर्तनशील वाक्य-विन्यास के साथ अपरिवर्तनीय संशोधनों को संभालता है, जिससे जटिल अंतर्निहित स्थिति में बदलाव पढ़ने योग्य और सुरक्षित बनते हैं।

React 19 ने Server Actions के भीतर आशावादी संशोधनों के लिए अंतर्निहित हुक के रूप में useOptimistic(state, updateFn) पेश किया। const [optimisticState, addOptimistic] = useOptimistic(items, (state, newItem) => [...state, newItem])। addOptimistic(newItem) चलाने पर सर्वर कार्रवाई असमकालिक रूप से चलते हुए भी यूआई तुरंत संशोधित हो जाता है।

useOptimistic पुनर्स्थापन अपने-आप संभालता है। जब Server Action सफलता या त्रुटि के साथ पूरी हो जाती है, तो React आशावादी स्थिति को वापस लाकर सर्वर की वास्तविक स्थिति लागू करता है। आपको मैन्युअल पुनर्स्थापन तर्क लिखने की आवश्यकता नहीं है — React कार्रवाई की Suspense सीमा के दौरान आशावादी संशोधन का जीवनचक्र संभालता है।

मैन्युअल आशावादी संशोधन पूरा नियंत्रण देते हैं, लेकिन अतिरिक्त प्रारंभिक कोड चाहते हैं। React Query का onMutate/onError/onSettled क्वेरी कैश के साथ जुड़कर स्वचालित समन्वयन करता है। Server Actions के लिए useOptimistic सबसे सरल है, लेकिन इसके लिए React 19 और सर्वर-कार्रवाई आर्किटेक्चर आवश्यक है। अपनी डेटा परत के आधार पर चुनें: सरल स्थानीय स्थिति के लिए मैन्युअल तरीका, REST एपीआई के लिए React Query और RSC/Server Actions के लिए useOptimistic।

आशावादी तरीका चुनते समय अपने आर्किटेक्चर पर विचार करें। यदि आप पूरे ऐप में React Query का उपयोग करते हैं, तो उसका onMutate तरीका सुसंगत और कैश की जानकारी रखने वाला है। यदि आप वैश्विक स्थिति के लिए Zustand का उपयोग करते हैं, तो कार्रवाई-आधारित तरीका स्वाभाविक रूप से उपयुक्त बैठता है। यदि आप Server Actions के साथ React 19 पर हैं, तो useOptimistic स्वाभाविक विकल्प है। एक ही ऐप में तरीकों को मिलाकर उपयोग करना सामान्य और स्वीकार्य है।

React Query का useMutation onMutate (क्वेरी रद्द करना, प्रतिलिपि सुरक्षित रखना, आशावादी संशोधन लागू करना और संदर्भ लौटाना), onError (संदर्भ से प्रतिलिपि वापस लाना) और onSettled (फिर से प्राप्त करने के लिए अमान्य करना) का उपयोग करता है। Zustand के आशावादी संशोधन पहले स्थिति की कार्रवाई और फिर API को तुरंत चलाते हैं तथा विफलता पर पुनर्स्थापन करते हैं। React 19 का useOptimistic Server Actions के भीतर स्वचालित पुनर्स्थापन देता है। अपनी डेटा परत के आर्किटेक्चर के अनुकूल तरीका चुनें।