Die Interaktion mit externen APIs ist oft unerlässlich, und React Query vereinfacht dies, indem es Ihnen ermöglicht, sich auf die Daten zu konzentrieren und nicht auf die Komplexität des Abrufens. Dieser Leitfaden führt Sie durch die Einrichtung eines React Native-Projekts mit Expo und dessen Integration in React Query.

Schritt 1: Richten Sie Ihr Expo-Projekt ein

Um zu beginnen, installieren Sie Expo CLI und erstellen Sie ein neues Projekt. Wenn Sie bereits ein Projekt haben, fahren Sie mit dem nächsten Schritt fort.

• Expo CLI installieren:

  npm install -g expo-cli

• Neues Projekt erstellen:

  expo init my-react-native-query-app

Wählen Sie eine Vorlage basierend auf Ihren Anforderungen.

Schritt 2: Installieren Sie React Query & Dependencies

React Query ist leistungsstark für die Verwaltung des Serverstatus in Ihren React Native-Apps.

• React Query installieren:

  npm install @tanstack/react-query

• Zusätzliche Abhängigkeiten installieren:

  npx expo install @react-native-community/netinfo

Schritt 3: Hilfsfunktionen erstellen

Erstellen Sie drei benutzerdefinierte Hooks in einem Hooks-Ordner im Stammverzeichnis Ihres Projekts.

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);
     });
   });

Dies ermöglicht den automatischen erneuten Abruf, wenn die App erneut eine Verbindung zum Internet herstellt.

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();
   }, []);

Dadurch wird der App-Status aktualisiert, wenn die App aktiv ist.

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]),
     );
   }

Dieser benutzerdefinierte Hook löst einen erneuten Aufruf aus, wenn der Bildschirm fokussiert ist.

Schritt 4: Implementieren Sie die Funktionen in Ihrer Stammdatei

Richten Sie in Ihrer Hauptroutendatei Folgendes ein:

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}
    
  );
}

Schritt 5: Starten Sie Ihren Entwicklungsserver

Navigieren Sie zu Ihrem Projektverzeichnis und starten Sie den Expo-Entwicklungsserver:

expo start

Expo ermöglicht schnelles Testen über die Expo Go-App oder durch die Erstellung einer Entwicklungs-App. Weitere Informationen zum Erstellen eines Entwicklungs-Builds finden Sie in der Expo-Dokumentation.

Abschluss

Das Einrichten eines Expo React Native-Projekts mit React Query vereinfacht die Statusverwaltung und API-Interaktionen. Durch die Nutzung der leistungsstarken Funktionen von React Query, wie etwa Caching und Hintergrundaktualisierungen, können Sie sich mehr auf Ihre Daten konzentrieren und müssen sich weniger mit den Feinheiten des Abrufens befassen.

Viel Spaß beim Codieren! ???‍? ???‍? ?