Interactuar con API externas suele ser esencial, y React Query lo simplifica al permitirle centrarse en los datos en lugar de en la complejidad de recuperarlos. Esta guía lo guiará a través de la configuración de un proyecto React Native usando Expo y su integración con React Query.

Paso 1: configura tu proyecto de exposición

Para comenzar, instale Expo CLI y cree un nuevo proyecto. Si ya tienes un proyecto, salta al siguiente paso.

• Instalar Expo CLI:

  npm install -g expo-cli

• Crear un nuevo proyecto:

  expo init my-react-native-query-app

Elija una plantilla según sus necesidades.

Paso 2: Instalar React Query y Dependencias

React Query es potente para administrar el estado del servidor en tus aplicaciones React Native.

• Instalar consulta de reacción:

  npm install @tanstack/react-query

• Instalar dependencias adicionales:

  npx expo install @react-native-community/netinfo

Paso 3: crear funciones auxiliares

Crea tres ganchos personalizados en una carpeta de ganchos en la raíz de tu proyecto.

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

Esto permite la recuperación automática cuando la aplicación se vuelve a conectar a 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();
   }, []);

Esto actualiza el estado de la aplicación cuando está activa.

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

Este gancho personalizado activa una recuperación cuando la pantalla está enfocada.

Paso 4: implemente las funciones en su archivo raíz

En su archivo de ruta principal, configure lo siguiente:

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

Paso 5: inicie su servidor de desarrollo

Navega al directorio de tu proyecto e inicia el servidor de desarrollo de Expo:

expo start

Expo permite realizar pruebas rápidas a través de la aplicación Expo Go o mediante la creación de una aplicación de desarrollo. Para obtener más detalles sobre cómo crear una compilación de desarrollo, consulte la documentación de Expo.

Conclusión

Configurar un proyecto Expo React Native con React Query simplifica la administración del estado y las interacciones API. Al aprovechar las potentes funciones de React Query, como el almacenamiento en caché y las actualizaciones en segundo plano, puedes concentrarte más en tus datos y menos en las complejidades de recuperarlos.

¡Feliz codificación! ??‍? ??‍? ?