غالبًا ما يكون التفاعل مع واجهات برمجة التطبيقات الخارجية أمرًا ضروريًا، ويعمل React Query على تبسيط ذلك من خلال السماح لك بالتركيز على البيانات بدلاً من تعقيد جلبها. سيرشدك هذا الدليل خلال إعداد مشروع React Native باستخدام Expo ودمجه مع React Query.

الخطوة 1: قم بإعداد مشروع المعرض الخاص بك

للبدء، قم بتثبيت Expo CLI وأنشئ مشروعًا جديدًا. إذا كان لديك مشروع بالفعل، فانتقل إلى الخطوة التالية.

• تثبيت Expo CLI:

  npm install -g expo-cli

• إنشاء مشروع جديد:

  expo init my-react-native-query-app

اختر نموذجًا بناءً على احتياجاتك.

الخطوة 2: تثبيت React Query والتبعيات

يعد React Query فعالاً لإدارة حالة الخادم في تطبيقات React Native.

• تثبيت استعلام التفاعل:

  npm install @tanstack/react-query

• تثبيت تبعيات إضافية:

  npx expo install @react-native-community/netinfo

الخطوة 3: إنشاء وظائف المساعدة

قم بإنشاء ثلاثة خطافات مخصصة في مجلد الخطافات في جذر مشروعك.

1. استخدامAppState.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. استخدامOnlineManager.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. استخدامRefreshOnFocus.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:

expo start

يتيح Expo إجراء اختبار سريع عبر تطبيق Expo Go أو عن طريق إنشاء تطبيق تطوير. لمزيد من التفاصيل حول إنشاء بنية تطويرية، راجع وثائق Expo.

خاتمة

يؤدي إعداد مشروع Expo React Native باستخدام React Query إلى تبسيط إدارة الحالة وتفاعلات واجهة برمجة التطبيقات (API). من خلال الاستفادة من ميزات React Query القوية، مثل التخزين المؤقت وتحديثات الخلفية، يمكنك التركيز بشكل أكبر على بياناتك وتقليل التركيز على تعقيدات جلبها.

برمجة سعيدة! ??‍? ??‍? ?