@tanstack/react-query

npx expo install @tanstack/react-query @react-native-community/netinfo

// src/lib/queryClient.ts
import { QueryClient } from "@tanstack/react-query";
 
export function createQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 30_000,
        gcTime: 5 * 60_000,
        retry: 2,
        refetchOnReconnect: true,
        refetchOnWindowFocus: true, // wired via focusManager below
      },
      mutations: {
        retry: 1,
      },
    },
  });
}

// src/lib/setupMobileQuery.ts - call once at bootstrap
import NetInfo from "@react-native-community/netinfo";
import { AppState, type AppStateStatus } from "react-native";
import { focusManager, onlineManager } from "@tanstack/react-query";
 
export function setupMobileQuery() {
  onlineManager.setEventListener((setOnline) =>
    NetInfo.addEventListener((state) => {
      const online =
        state.isConnected !== false && state.isInternetReachable !== false;
      setOnline(online);
    })
  );
 
  const onAppStateChange = (status: AppStateStatus) => {
    focusManager.setFocused(status === "active");
  };
 
  const sub = AppState.addEventListener("change", onAppStateChange);
  return () => sub.remove();
}

// app/_layout.tsx
import { QueryClientProvider } from "@tanstack/react-query";
import { Stack } from "expo-router";
import { useEffect, useState } from "react";
import { createQueryClient } from "@/lib/queryClient";
import { setupMobileQuery } from "@/lib/setupMobileQuery";
 
export default function RootLayout() {
  const [client] = useState(createQueryClient);
 
  useEffect(() => setupMobileQuery(), []);
 
  return (
    <QueryClientProvider client={client}>
      <Stack />
    </QueryClientProvider>
  );
}

// api/orders.ts
export type Order = { id: string; status: string; totalCents: number };
 
export async function fetchOrders(signal?: AbortSignal): Promise<Order[]> {
  const res = await fetch("https://api.example.com/orders", { signal });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// screens/OrdersScreen.tsx
import { useQuery } from "@tanstack/react-query";
import { useCallback, useState } from "react";
import { FlatList, RefreshControl, Text, View } from "react-native";
import { fetchOrders } from "@/api/orders";
 
export function OrdersScreen() {
  const [refreshing, setRefreshing] = useState(false);
 
  const { data: orders = [], isPending, isError, error, refetch, isFetching } = useQuery({
    queryKey: ["orders"],
    queryFn: ({ signal }) => fetchOrders(signal),
    staleTime: 60_000,
  });
 
  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await refetch();
    setRefreshing(false);
  }, [refetch]);
 
  if (isPending) return <Text>Loading…</Text>;
  if (isError) return <Text>Error: {(error as Error).message}</Text>;
 
  return (
    <View style={{ flex: 1 }}>
      {isFetching && !refreshing && <Text>Updating…</Text>}
      <FlatList
        data={orders}
        keyExtractor={(o) => o.id}
        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
        renderItem={({ item }) => (
          <Text>
            {item.id} - {item.status} - ${(item.totalCents / 100).toFixed(2)}
          </Text>
        )}
      />
    </View>
  );
}

["products"][("products", { category: "shoes" })][("order", orderId)][
  // Invalidate all product queries after a mutation
  queryClient.invalidateQueries({ queryKey: ["products"] })
];

npx expo install @react-native-async-storage/async-storage \
  @tanstack/react-query-persist-client @tanstack/query-async-storage-persister