Implement Network Requests and Data Fetching

Covers all network-request and data-fetching work in React Native/Expo apps: raw fetch, preferred over axios per the skill's stated preference for expo/fetch, with status-code checking; React Query (TanStack Query) setup with a QueryClientProvider, useQuery, and useMutation; comprehensive error handling via a typed ApiError class plus exponential-backoff retry; authentication token storage and refresh through expo-secure-store with an in-flight-refresh-deduplication pattern; offline support via NetInfo for connectivity status, wired into React Query's onlineManager to pause and resume queries; environment-variable-based API configuration (EXPO_PUBLIC_ prefix for client-exposed values, unprefixed vars for server-only secrets, per-environment .env.development/.env.production files); and request cancellation via AbortController, handled automatically by React Query. It also covers Expo Router's route-level data loaders (useLoaderData, web-only, SDK 55+) via a separate bundled reference.

const fetchUser = async (userId: string) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  return response.json();
};

Use it for any API request, data-fetching setup, network debugging, caching strategy, offline handling, or auth/token management in a React Native/Expo app - the skill states it must be used for any networking work. Its own decision tree routes the choice: web-only route-level loading on SDK 55+ goes to Expo Router loaders, while native apps use React Query or fetch instead; complex apps get React Query, simpler needs get SWR or a custom hook. It draws one hard security line: EXPO_PUBLIC_-prefixed environment variables are inlined into the client bundle at build time and visible in the built app, so a write-scoped API key or database password must never carry that prefix - only unprefixed variables in server-side API routes are safe for secrets.

Inputs are a request URL, method, headers, and body; output is parsed JSON or a thrown, typed error. The comprehensive error-handling pattern wraps fetch in an ApiError class carrying an HTTP status and optional code, distinguishing a parsed API error from a network failure such as no connectivity or a timeout, and pairs with an exponential-backoff retry helper. Auth output is a token pair managed through expo-secure-store, never AsyncStorage, which the skill flags as insecure for tokens, with a de-duplicated in-flight refresh so concurrent requests don't trigger multiple simultaneous refresh calls. Offline output is a useNetworkStatus hook backed by NetInfo, and when wired into React Query's onlineManager, queries automatically pause while offline and resume once connectivity returns.

Built around @tanstack/react-query as the primary data-fetching and caching layer, with SWR as a lighter alternative, expo-secure-store for token storage, @react-native-community/netinfo for connectivity detection, and Expo's own EXPO_PUBLIC_ environment-variable convention for build-time configuration. For Expo Router web apps on SDK 55+, it defers to a bundled references/expo-router-loaders.md for route-level useLoaderData loaders rather than covering them inline.

React Native/Expo developers implementing or debugging any networking code - API calls, caching, offline behavior, or auth token handling - who want the platform-correct pattern, fetch over axios, SecureStore over AsyncStorage for tokens, EXPO_PUBLIC_ only for client-safe values, rather than generic web-fetch advice.