बाहरी एपीआई के साथ बातचीत करना अक्सर आवश्यक होता है, और रिएक्ट क्वेरी आपको इसे लाने की जटिलता के बजाय डेटा पर ध्यान केंद्रित करने की अनुमति देकर इसे सरल बनाती है। यह मार्गदर्शिका आपको एक्सपो का उपयोग करके एक रिएक्ट नेटिव प्रोजेक्ट स्थापित करने और इसे रिएक्ट क्वेरी के साथ एकीकृत करने के बारे में बताएगी।

चरण 1: अपना एक्सपो प्रोजेक्ट सेट करें

आरंभ करने के लिए, एक्सपो सीएलआई स्थापित करें और एक नया प्रोजेक्ट बनाएं। यदि आपके पास पहले से ही कोई प्रोजेक्ट है, तो अगले चरण पर जाएं।

• एक्सपो सीएलआई स्थापित करें:

  npm install -g expo-cli

• एक नया प्रोजेक्ट बनाएं:

  expo init my-react-native-query-app

अपनी आवश्यकताओं के आधार पर एक टेम्पलेट चुनें।

चरण 2: रिएक्ट क्वेरी और निर्भरताएँ स्थापित करें

रिएक्ट क्वेरी आपके रिएक्ट नेटिव ऐप्स में सर्वर स्थिति को प्रबंधित करने के लिए शक्तिशाली है।

• प्रतिक्रिया क्वेरी स्थापित करें:

  npm install @tanstack/react-query

• अतिरिक्त निर्भरताएँ स्थापित करें:

  npx expo install @react-native-community/netinfo

चरण 3: सहायक कार्य बनाएँ

अपने प्रोजेक्ट के मूल में हुक फ़ोल्डर में तीन कस्टम हुक बनाएं।

1. useAppState.ts:

   import NetInfo from '@react-native-community/netinfo';
   import { onlineManager } from '@tanstack/react-query';

   onlineManager.setEventListener((setOnline) => {
     return NetInfo.addEventListener((state) => {
       setOnline(!!state.isConnected);
     });
   });

जब ऐप इंटरनेट से दोबारा कनेक्ट होता है तो यह ऑटो-रीफ़ैच को सक्षम बनाता है।

1. UseOnlineManager.ts:

   import { useEffect } from 'react';
   import { AppState, Platform } from 'react-native';
   import { focusManager } from '@tanstack/react-query';

   function onAppStateChange(status: AppStateStatus) {
     if (Platform.OS !== 'web') {
       focusManager.setFocused(status === 'active');
     }
   }

   useEffect(() => {
     const subscription = AppState.addEventListener('change', onAppStateChange);
     return () => subscription.remove();
   }, []);

ऐप सक्रिय होने पर यह ऐप स्थिति को अपडेट करता है।

1. useRefreshOnFocus.ts:

   import React from 'react';
   import { useFocusEffect } from '@react-navigation/native';

   export function useRefreshOnFocus(refetch: () => Promise) {
     const firstTimeRef = React.useRef(true);

     useFocusEffect(
       React.useCallback(() => {
         if (firstTimeRef.current) {
           firstTimeRef.current = false;
           return;
         }

         refetch();
       }, [refetch]),
     );
   }

स्क्रीन फोकस होने पर यह कस्टम हुक रीफ़ेच ट्रिगर करता है।

चरण 4: अपनी रूट फ़ाइल में फ़ंक्शंस लागू करें

अपनी मुख्य रूट फ़ाइल में, निम्नलिखित सेट करें:

import {
  QueryClient,
  QueryClientProvider,
  focusManager,
} from "@tanstack/react-query";
import { AppStateStatus, Platform } from "react-native";
import { useOnlineManager } from "@/hooks/query/useOnlineManager";
import { useAppState } from "@/hooks/query/useAppState";

export default function RootLayout() {
  function onAppStateChange(status: AppStateStatus) {
    if (Platform.OS !== "web") {
      focusManager.setFocused(status === "active");
    }
  }

  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: 2 } },
  });

  useOnlineManager();
  useAppState(onAppStateChange);

  return (
    
      {Rest of your project}
    
  );
}

चरण 5: अपना विकास सर्वर प्रारंभ करें

अपनी परियोजना निर्देशिका पर नेविगेट करें और एक्सपो डेवलपमेंट सर्वर शुरू करें:

expo start

एक्सपो एक्सपो गो ऐप के माध्यम से या एक विकास ऐप बनाकर त्वरित परीक्षण की अनुमति देता है। डेवलपमेंट बिल्ड बनाने के बारे में अधिक जानकारी के लिए, एक्सपो के दस्तावेज़ देखें।

निष्कर्ष

रिएक्ट क्वेरी के साथ एक एक्सपो रिएक्ट नेटिव प्रोजेक्ट स्थापित करना राज्य प्रबंधन और एपीआई इंटरैक्शन को सरल बनाता है। रिएक्ट क्वेरी की शक्तिशाली सुविधाओं, जैसे कैशिंग और बैकग्राउंड अपडेट का लाभ उठाकर, आप अपने डेटा पर अधिक ध्यान केंद्रित कर सकते हैं और इसे लाने की जटिलताओं पर कम ध्यान केंद्रित कर सकते हैं।

हैप्पी कोडिंग! ??‍? ??‍? ?