Interagir com APIs externas geralmente é essencial, e o React Query simplifica isso, permitindo que você se concentre nos dados, em vez da complexidade de buscá-los. Este guia orientará você na configuração de um projeto React Native usando Expo e na integração com React Query.

Etapa 1: configure seu projeto Expo

Para começar, instale o Expo CLI e crie um novo projeto. Se você já tem um projeto, pule para a próxima etapa.

• Instale o Expo CLI:

  npm install -g expo-cli

• Criar um novo projeto:

  expo init my-react-native-query-app

Escolha um modelo com base nas suas necessidades.

Etapa 2: instalar o React Query e dependências

React Query é poderoso para gerenciar o estado do servidor em seus aplicativos React Native.

• Instalar consulta React:

  npm install @tanstack/react-query

• Instalar dependências adicionais:

  npx expo install @react-native-community/netinfo

Etapa 3: criar funções auxiliares

Crie três ganchos personalizados em uma pasta de ganchos na raiz do seu projeto.

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

Isso permite a busca automática quando o aplicativo se reconecta à 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();
   }, []);

Isso atualiza o estado do aplicativo quando ele está ativo.

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 aciona uma nova busca quando a tela está focada.

Etapa 4: implemente as funções em seu arquivo raiz

Em seu arquivo de rota principal, configure o seguinte:

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

Etapa 5: inicie seu servidor de desenvolvimento

Navegue até o diretório do seu projeto e inicie o servidor de desenvolvimento Expo:

expo start

Expo permite testes rápidos por meio do aplicativo Expo Go ou criando um aplicativo de desenvolvimento. Para obter mais detalhes sobre a criação de uma compilação de desenvolvimento, consulte a documentação da Expo.

Conclusão

Configurar um projeto Expo React Native com React Query simplifica o gerenciamento de estado e as interações de API. Ao aproveitar os recursos poderosos do React Query, como cache e atualizações em segundo plano, você pode se concentrar mais em seus dados e menos nas complexidades de buscá-los.

Boa codificação! ??‍? ??‍? ?