Comment configurer un projet natif Expo React avec React Query

Interagir avec des API externes est souvent essentiel, et React Query simplifie cela en vous permettant de vous concentrer sur les données plutôt que sur la complexité de leur récupération. Ce guide vous guidera dans la configuration d'un projet React Native à l'aide d'Expo et dans son intégration avec React Query.

Étape 1 : Configurez votre projet d'exposition

Pour commencer, installez Expo CLI et créez un nouveau projet. Si vous avez déjà un projet, passez à l'étape suivante.

• Installer Expo CLI:

npm install -g expo-cli

• Créer un nouveau projet:

expo init my-react-native-query-app

Choisissez un modèle en fonction de vos besoins.

Étape 2 : Installer la requête et les dépendances de React

React Query est puissant pour gérer l'état du serveur dans vos applications React Native.

• Installer React Query:

npm install @tanstack/react-query

• Installer des dépendances supplémentaires:

npx expo install @react-native-community/netinfo

Étape 3 : Créer des fonctions d'assistance

Créez trois hooks personnalisés dans un dossier hooks à la racine de votre projet.

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

Cela permet la récupération automatique lorsque l'application se reconnecte à Internet.

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

Cela met à jour l'état de l'application lorsque l'application est active.

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

Ce hook personnalisé déclenche une récupération lorsque l'écran est mis au point.

Étape 4 : implémentez les fonctions dans votre fichier racine

Dans votre fichier de route principal, configurez les éléments suivants :

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

Étape 5 : démarrez votre serveur de développement

Accédez au répertoire de votre projet et démarrez le serveur de développement Expo :

expo start

Expo permet des tests rapides via l'application Expo Go ou en créant une application de développement. Pour plus de détails sur la création d'une version de développement, reportez-vous à la documentation d'Expo.

Conclusion

La mise en place d'un projet Expo React Native avec React Query simplifie la gestion des états et les interactions API. En tirant parti des fonctionnalités puissantes de React Query, telles que la mise en cache et les mises à jour en arrière-plan, vous pouvez vous concentrer davantage sur vos données et moins sur les subtilités de leur récupération.

Bon codage ! ???? ???? ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!