TanStack Query on Mobile

// src/lib/queryClient.ts
import NetInfo from "@react-native-community/netinfo";
import { QueryClient, focusManager, onlineManager } from "@tanstack/react-query";
import { AppState, Platform } from "react-native";
 
// Refetch when app returns to foreground
focusManager.setEventListener((handleFocus) => {
  const sub = AppState.addEventListener("change", (state) => {
    if (state === "active") handleFocus();
  });
  return () => sub.remove();
});
 
// Pause retries when offline; resume when connected
onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    const online =
      state.isConnected !== false && state.isInternetReachable !== false;
    setOnline(online);
  });
});
 
export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: 30_000,
      gcTime: 24 * 60 * 60_000,
      refetchOnWindowFocus: true,
      refetchOnReconnect: true,
    },
  },
});

// app/_layout.tsx
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "../src/lib/queryClient";
 
export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* routes */}
    </QueryClientProvider>
  );
}

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

import NetInfo from "@react-native-community/netinfo";
import {
  QueryClient,
  QueryClientProvider,
  focusManager,
  onlineManager,
  useQuery,
} from "@tanstack/react-query";
import { useEffect } from "react";
import {
  AppState,
  FlatList,
  Pressable,
  RefreshControl,
  StyleSheet,
  Text,
  View,
} from "react-native";
 
const API = "https://jsonplaceholder.typicode.com";
 
focusManager.setEventListener((handleFocus) => {
  const sub = AppState.addEventListener("change", (s) => {
    if (s === "active") handleFocus();
  });
  return () => sub.remove();
});
 
onlineManager.setEventListener((setOnline) =>
  NetInfo.addEventListener((state) => {
    setOnline(!!state.isConnected && state.isInternetReachable !== false);
  })
);
 
const queryClient = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 45_000, retry: 2, refetchOnReconnect: true },
  },
});
 
async function fetchPosts({ signal }: { signal?: AbortSignal }) {
  const res = await fetch(`${API}/posts?_limit=12`, { signal });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json() as Promise<{ id: number; title: string }[]>;
}
 
function PostsScreen() {
  const { data, error, isError, isFetching, refetch, dataUpdatedAt } = useQuery({
    queryKey: ["posts"],
    queryFn: fetchPosts,
  });
 
  return (
    <View style={styles.screen}>
      <Text style={styles.meta}>
        {isFetching ? "Updating…" : `Updated ${new Date(dataUpdatedAt).toLocaleTimeString()}`}
      </Text>
 
      <FlatList
        data={data}
        keyExtractor={(item) => String(item.id)}
        refreshControl={<RefreshControl refreshing={isFetching} onRefresh={refetch} />}
        renderItem={({ item }) => <Text style={styles.row}>{item.title}</Text>}
        ListEmptyComponent={isError ? null : <Text>Loading…</Text>}
      />
 
      {isError && (
        <View style={styles.error}>
          <Text>{error instanceof Error ? error.message : "Failed"}</Text>
          <Pressable onPress={() => refetch()}>
            <Text style={styles.retry}>Retry</Text>
          </Pressable>
        </View>
      )}
    </View>
  );
}
 
export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <PostsScreen />
    </QueryClientProvider>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, backgroundColor: "#fff" },
  meta: { fontSize: 12, color: "#64748b", marginBottom: 8 },
  row: { paddingVertical: 10, borderBottomWidth: StyleSheet.hairlineWidth, borderColor: "#e2e8f0" },
  error: { padding: 12, backgroundColor: "#fee2e2", borderRadius: 8 },
  retry: { color: "#2563eb", fontWeight: "600", marginTop: 8 },
});

// Optional: only refetch "important" queries on focus
queryClient.refetchQueries({ queryKey: ["inbox"], type: "active" });

onlineManager.setEventListener((setOnline) => {
  return NetInfo.addEventListener((state) => {
    // null reachability = unknown - do not force offline
    if (state.isConnected === false) {
      setOnline(false);
      return;
    }
    if (state.isInternetReachable === false) {
      setOnline(false);
      return;
    }
    setOnline(true);
  });
});

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

import AsyncStorage from "@react-native-async-storage/async-storage";
import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 
const persister = createAsyncStoragePersister({ storage: AsyncStorage });
 
// Wrap QueryClientProvider with PersistQueryClientProvider in root layout

useQuery({
  queryKey: ["profile", userId],
  queryFn: fetchProfile,
  enabled: !!userId,
});