Configurar o React Query em um Projeto Expo

Há uma boa chance de que você precisará interagir com uma API externa para receber e enviar dados, e o React Query torna esse processo fácil, permitindo que nos concentremos mais no dado do que na lógica de obtenção dos dados. Neste post do blog, guiaremos você pelos passos para configurar um projeto React Native usando Expo e integrá-lo com o React Query, garantindo que possa gerenciar suas solicitações da API eficientemente.

Passo 1: Configurar seu Projeto Expo

O primeiro passo é criar um novo projeto Expo. O Expo é uma estrutura e uma plataforma para aplicações React universais, e simplifica o processo de desenvolvimento e implantação de aplicativos React Native.

Se você já tem um projeto existente, pode pular esta etapa e ir direto para a etapa 2

• Instale Expo CLI: Se ainda não fez isso, é necessário instalar o Expo CLI. Você pode fazer isso globalmente usando npm:

Você pode usar qualquer outro gerenciador de pacotes com o qual se sinta confortável neste momento, basta substituir o comando npm install pela instrução de instalação apropriada do seu preferido.

npm install -g expo-cli

• Crie um Novo Projeto Expo: Agora, crie um novo projeto usando o Expo CLI:

expo init my-react-native-query-app

Escolha um modelo com base em sua preferência.

Passo 2: Instalar o React Query & Dependências Necessárias

O React Query é uma ferramenta poderosa para gerenciar o estado do servidor em seus aplicativos React e React Native. Ele fornece hooks para buscar, cachear e sincronizar seus dados sem exigir a gestão de estado global.

• Instale as dependências necessárias

npm install @tanstack/react-query

npx expo install @react-native-community/netinfo

Passo 3: Crie funções auxiliares para o projeto

Vamos criar três funções que precisaremos neste projeto. As funções serão hooks personalizados e podemos salvá-las em uma subpasta chamada hooks na pasta raiz.

• Criar a função 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)
  })
})

Essa função realizará a refetch automática toda vez que você reconectar o aplicativo à internet, caso tenha ido offline.

• Crie a função UseOnlineManager.ts

import { useEffect } from 'react'
import { AppState, Platform } from 'react-native'
import type { AppStateStatus } 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()
}, [])

Em vez de ouvintes de eventos no window, o React Native fornece informações sobre foco através do módulo AppState. Usaremos o evento

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);
  <QueryClientProvider client={queryClient}>
    {Rest of your project}
  </QueryClientProvider>
}

Com isso, você poderá usar o react query em seu desenvolvimento mobile da mesma forma que usa na web.

• Inicie o servidor de desenvolvimento: No terminal, navegue para a pasta que o Expo criou com toda a configuração inicial e execute

expo start

Projetos do Expo podem ser construídos rapidamente usando o aplicativo Expo Go, que pode ser baixado no seu telefone, mas é recomendável criar um app de desenvolvimento desde o início do projeto. Você pode ver os documentos sobre como fazer isso.

Conclusão

Ao configurar um projeto Expo React Native com React Query, você pode simplificar o processo de gerenciamento do estado do servidor e interação com APIs. As poderosas funcionalidades do React Query, como cache, atualizações em segundo plano e sincronização, permitem que você se concentre no que realmente importa - os dados, não na lógica de obtenção de dados.

HAPPY CODING 👨🏼‍💻 👩🏻‍💻 💻