rn-react-query-provider.tsx

import NetInfo from "@react-native-community/netinfo"
import {
  QueryClient,
  QueryClientProvider,
  focusManager,
  onlineManager,
} from "@tanstack/react-query"
import { useEffect } from "react"
import { AppState, Platform, type AppStateStatus } from "react-native"

const queryClient = new QueryClient({
  defaultOptions: {
    mutations: { retry: false },
    queries: { retry: false, refetchOnMount: true, refetchOnWindowFocus: false },
  },
})

onlineManager.setEventListener(setOnline => {
  return NetInfo.addEventListener(state => {
    setOnline(!!state.isConnected)
  })
})

function onAppStateChange(status: AppStateStatus) {
  if (Platform.OS !== "web") {
    focusManager.setFocused(status === "active")
  }
}

export default function ReactQueryProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const subscription = AppState.addEventListener("change", onAppStateChange)
    return () => subscription.remove()
  }, [])

  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
}